I have this markup for mobile.
<table>
<tr>
<td style="width:60%">
<div class="ellipsis">
Test bla bla
</div>
</td>
<td style="width:40%">
</td>
</tr>
CSS
.ellipsis {
width : 100%;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
The truncation doesn't work as desired, instead the column expands depending on content.
Table-Layout : fixed makes both the columns equal.
Any suggestions ? Thanks.
Please use the following css to make css3 truncation work with tables
table {
width: 200px; /*specify a width*/
table-layout:fixed;
}
The property "table-layout:fixed" seems important to work text truncation for any block level elements inside a table.
Related
I have a div with different number of span inside depending on my code, my problem is, sometimes the last span does not fit the space and everything lost the align, what I want to do is applied my "truncate" class to the last element if needed, there is an example:
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
with this configuration, and also aplying "truncate" everything moved to left, and I stop watching "one" instead "four" as I want, either the "..." are not shown.
I also tried aplied truncate to the last child with same result:
.truncate:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Where is my mistake?
Check out the :last-child pseudo-class.
Might not be relevant to you now, but I had this problem, and I solved it with flex-shrink: 0 which tells certain elements never to shrink, which means that last element shrinks.
See example: https://jsfiddle.net/68usz20p/2/
div {
display: flex;
overflow: hidden;
width: 175px;
border: 1px solid red;
}
div span:not(:last-child) {
margin-right: 1ch;
flex-shrink: 0;
}
div span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can using css :last-child Selector
.truncate span:last-child {
display:none; visibility:hidden;
}
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
Preview at https://jsfiddle.net/itsselvam/yt9srxLo/
I have an interesting CSS question for some of you CSS wizards. I have a table that has user generated content, and I want to limit long columns to a maximum width. The table is not fixed layout, and the column widths are user-specified too but by default should have a maximum width.
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Long Text Here</td><td>3</td></tr>
</tbody>
</table>
I added overflow: hidden, white-space: nowrap, and text-overflow: ellipsis to the header's css class, and in the above html the text 'Long Text Here' pushes the width of that column out. But this makes it so that the column width can only be that text length or longer.
What can I do - other than use fixed layout - to make a cell shrink, and show ellipses?
Thanks!
A simple option would be to set a maximum width on the column, so that a few really long entries don't make it ludicrously wide. For example, to do this for the first column:
td:first-child {
max-width: 5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td></tr>
</thead>
<tbody>
<tr><td>Text</td><td>1</td></tr>
<tr><td>Text</td><td>2</td></tr>
<tr><td>Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
(You could use :nth-child(), or maybe classes, to restrict other columns.)
This solution requires the maximum width to be set in the CSS, however, which might not be very useful for dynamic content. Instead, you could set it in style attributes in the HTML directly, which is easier to do using JavaScript or your templating system:
td:first-child, th:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<thead>
<tr><th style="max-width: 5em">Header 1</th><th>Header 2</th></tr>
</thead>
<tbody>
<tr><td style="max-width: 5em">Text</td><td>1</td></tr>
<tr><td style="max-width: 5em">Text</td><td>2</td></tr>
<tr><td style="max-width: 5em">Really, Ridiculously Long Text Here</td><td>3</td></tr>
</tbody>
</table>
Hi I am not sure if you are asking for something like this
https://jsfiddle.net/MAXXALANDER/o6x1nt93/15/
table{
width:100%;
}
td {
width:50%;
float:left;
padding:0;
margin:0;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
If am working on a scheduling page that has a row for each hour of the day, and a column for each day of the week. Some cells can span multiple rows (using rowspan) if the occur for multiple hours - a typical calendar situation. Each TD contains a DIV with the event information I would like to control. Additionally, each column must have a width of 12.5% (a col for the time, and 7 for each day)
In short, I would like the div contents to use whatever space is available in the cell. If the td spans 4 rows, it should use all that space and allow wrapping to include as much of the text as will fit, but if the rowspan is only 1, then it should only display 1 line and hide anything beyond that.
I've tried most of the solutions I've found on SE and other sites, but they all interfere with the consistent column width, or with the row height.
Try this using run the code Snippet or find the JSFiddle
.demo {
table-layout: fixed;
width: 100%;
white-space: nowrap;
}
.demo td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ID {
width: 10%;
}
.email {
width: 20%;
}
<table class="demo">
<thead>
<tr>
<th class="ID">ID</th>
<th class="email">Email<th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>pradyumnaswain76#gmail.com</td>
</tr>
</tbody>
</table>
I think the best way here is to style the <div> you don't want to resize, because the height of the row is determined according to the content size (http://www.w3.org/TR/CSS21/tables.html#height-layout).
Try this: http://jsfiddle.net/vz3muoq8/2/
HTML
<table>
<tr><td>aaa</td><td rowspan="3">aaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
<tr><td>aaa</td></tr>
<tr><td>aaa</td></tr>
<tr><td>aaa</td><td>aaa</td></tr>
<tr><td>aaa</td><td><div>aaaaaaaaaaaaaaaaaaaaaaaaa</div></td></tr>
<tr><td>aaa</td><td>aaa</td></tr>
</table>
CSS
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
overflow: hidden;
}
th, td {
border: 1px solid black;
width: 50px;
word-wrap: break-word;
height:15px;
text-wrap: ellipsis;
}
div {
height: 15px;
overflow: hidden;
background-color: yellow;
}
I am attempting to apply an ellipsis to a table cell, but set the cell width based on a parent div.
Consider the following example (JS fiddle here http://jsfiddle.net/zncGk/):
HTML
<div class="mydiv">
<table>
<tbody>
<tr><td>Hello Stack Overflow</td></tr>
</tbody>
</table>
</div>
CS
.mydiv{
width:50px;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}
JS
$(function() {
console.log("width = " + $("td").width());
});
The output is: width = 132, and the ellipsis doesn't appear.
What am I missing here? The ellipsis works if I set the table-cell width directly, but I need to to be set by the parent div.
Your code is good and working but you have given a space in width like this wi dith in your demo. See this working demo
Edit
If you want to ellipsis make work you need to set table-layout to fixed and give your table to 100%.
table{
table-layout: fixed;
width: 100%;
}
demo
I have a table cell that keep resisting to wrap it contents (a span). Here is the escenario according to Chrome dev tools:
The <td> has the following rules:
overflow:visible;
white-space:normal;
The <table> has:
table-layout:fixed;
First row in the table has two columns with fixed width defined; the problematic cell has padding="2".
From my knowledge that should do, but it is not wraping the contents. I have tried unsuccessfully with the following rules:
word-break: break-all;
word-wrap: break-word;
max-width: 120px; /*this is the max width I want to ensure*/
What am I missing here?
I don't know exactly how is your code because you didn't post it, but I followed your instructions and it worked for me.
See it here: http://jsfiddle.net/FJ7dB/
HTML:
<table>
<tr>
<td>TD-1-1</td>
<td padding="2">
<span>TD-1-2 ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</span>
</td>
</tr>
<tr>
<td>TD-2-1</td>
<td>TD-2-2</td>
</tr>
</table>
CSS:
table{
table-layout:fixed;
border:1px solid blue;
}
td{
width:120px;
max-width:120px;
word-break: break-all;
word-wrap: break-word;
border:1px solid red;
}
What makes it work is max-width, which you said it was unsuccessful.
And it isn't necessary to set
overflow:visible;
white-space:normal;
because visible and normal are their default values.