<td style="width:100%;overflow:hidden;border: 1px solid red"><div style="width:100px;border:1px solid green;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello,
how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? </div></td>
Yes but it cannot keep the dynamic width of the 2nd column
<td style="max-width:400px;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how areyou? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how
are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, howare you? Hello, how are you? </td>
<table style="table-layout:fixed;width: 100%;"><tbody><tr>
<td>System</td>
<td style="max-width:40rem;overflow:hidden;border: 1px solid red;text-overflow:ellipsis;white-space:nowrap;"> Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? </td>
<!-- your remaining code here -->
<td style="max-width:40rem;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how are
you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how
I tested code below ,and it seems works well when I change the screen size,
And here is my screenshot :
And code:
@{
ViewBag.Title = "Index";
Layout = null;
}
<html>
<head></head>
<body>
<h2>Index</h2>
<table style="table-layout:fixed;width:100%">
<tr>
<td style="max-width:40rem;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap">
Hello, how are you? Hello, how are you? Hello, how are
you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how
are you? Hello, how are you?
</td>
</tr>
</table>
</body>
</html>
Best regards,
Jolie
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
the width of 4th column is also a little bit different from different cases
If so ,I suggest that you may use x% to set the 4th column.
Best regards,
Jolie
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
31 Points
154 Posts
Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 03:40 AM|TW88|LINK
Possible to add text-overflow:ellipsis effect for the long text at 2nd column? I can't figure it out. thx.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table><tr>
<td>System</td>
<td style="width:100%;overflow:hidden;border: 1px solid red"><div style="width:100px;border:1px solid green;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? </div></td>
<td style="white-space:nowrap"> <input type="submit" name="BtnSend" value="Send Reject emails" id="BtnSend" class="HeaderButton" style="width:150px;" /> <input type="submit" name="BtnTestEmail" value="Test Email" id="BtnTestEmail" class="HeaderButton" style="width:80px;" /> <input type="submit" name="BtnBack" value="Back" id="BtnBack" class="HeaderButton" style="width:80px;" /></td>
<td style="white-space:nowrap"><img id="ImageLogon" src="Images/Logon.gif" align="absbottom" style="width:20px;" /> <span id="LbUserName class="LoginName">UserName</span></td> </tr>
</table> </body></html>
All-Star
15176 Points
3888 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 06:24 AM|raju dasa|LINK
Hi,
Check this site for example, applying ellipsis on td:
http://jsfiddle.net/fd3Zx/5/
You need to remove <div> from <td> for ellipsis to work.
rajudasa.blogspot.com || rajudasa-tech
Member
31 Points
154 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 06:33 AM|TW88|LINK
Yes but it cannot keep the dynamic width of the 2nd column
<td style="max-width:400px;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how areyou? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, howare you? Hello, how are you? </td>
All-Star
15176 Points
3888 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 07:12 AM|raju dasa|LINK
Hi,
Try setting width in % or rem units
rajudasa.blogspot.com || rajudasa-tech
Member
31 Points
154 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 07:12 AM|TW88|LINK
I find a better solution by using CSS calc and viewport
max-width:calc(100vw - 500px);
but the last column shows "Username", it may be longer or shorter
not best fit
Member
31 Points
154 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 07, 2017 07:24 AM|TW88|LINK
Hi raju
I tried your code but the table is not fully expanded to the screen.
we have some users with 4:3 monitors and some users with 16:9. We wish to make use of all the available space on the screen for every users.
<table style="table-layout:fixed;width:100%"><tr> <td>System</td>
<td style="max-width:40rem;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap">Hello, how are you? Hello, how are you? Hello, how are
you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how
are you? Hello, how are you? </td>
Contributor
5260 Points
2307 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 08, 2017 06:14 AM|AngelinaJolie|LINK
Hi TW88,
I tested code below ,and it seems works well when I change the screen size,
And here is my screenshot :
And code:
@{ ViewBag.Title = "Index"; Layout = null; } <html> <head></head> <body> <h2>Index</h2> <table style="table-layout:fixed;width:100%"> <tr> <td style="max-width:40rem;overflow:hidden;border:1px solid red;text-overflow:ellipsis;white-space:nowrap"> Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? Hello, how are you? </td> </tr> </table> </body> </html>Best regards,
Jolie
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
31 Points
154 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 08, 2017 06:21 AM|TW88|LINK
Hi Angelina
it is ok if I know the width of 2nd column (dynamic width)
2nd column will expand for wider monitor
the width of 4th column is also a little bit different from different cases
Now I can only make it without ellipsis effect
Contributor
5260 Points
2307 Posts
Re: Possible to add text-overflow:ellipsis at a tabel cell?
Mar 10, 2017 06:34 AM|AngelinaJolie|LINK
Hi TW88,
If so ,I suggest that you may use x% to set the 4th column.
Best regards,
Jolie
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.