<div className="container">
<div className="left-area">
<div className="container2">
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to truncate that very long text.
.container {
margin-top: 20px;
width: 90%;
display: flex;
.left-area {
flex: 1 1 20%;
.container2 {
flex: 1 1 20%;
table {
width: 100%;
}
}
}
}
I tried to use this css on the td cell
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
The missing key is table-layout: fixed.
table {
width: 100%;
table-layout: fixed;
}
td {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
With table-layout: auto (the default setting), the browser uses an automatic layout algorithm that checks the content size to set the width of the cells (and, therefore, columns).
The width and overflow properties are ignored in this scenario, and ellipsis can't work.
With table-layout: fixed, you can define the width of the cells on the first row (and, therefore, set the column widths for the table).
The width and overflow properties are respected in this case, allowing the ellipsis function to work.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Related
I have done quite a bit or searching on this but could not find a solution for my specific case. I am a beginner to CSS and the solution is probably really simple, I just cannot find it. So I am trying to create a table that has some columns with long text. I am able to show ellipsis to cut off too long text, but I would like to have the column resize and the ellipsis be updated if I reduce the size of the window, that also reduces the size of the table itself. Now the cell width remains the same and a horizontal scroll bar is shown, which I want to prevent. I know using fixed width for the column is probably the problem, but it is the only way I am able to show the ellipsis in the first place, without fixed width no ellipsis is shown. Here is a very simplified piece of code and the css that easily shows the problem:
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first column
</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Any pointers are appreciated
One way to do this is to use #media query. Do something like this
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* add as many break points you want */
#media screen (max-width: 768px) {
.overflowTableText {
max-width: 200px;
}
}
#media screen (max-width: 576px) {
.overflowTableText {
max-width: 150px;
}
}
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>first column</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
After fiddling around a bit I found a solution that works with multiple columns with ellipsis:
<div class="tableFixHead">
<table width="100%">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px">
first column
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
border-collapse: separate;
width: 90%;
padding-right: 8px;
}
.overflowTableText {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Good day, Do you know bootstap? you can easily do that with bootsrap
https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables
I am trying to get a horizontal line to stretch between the first and last columns in a table but I need the first and last columns to wrap if the text is long. The only way I have found to get the desired effect is to use width:100%; on the middle column, and white-space:nowrap; on the first and last, but I need to find another way as I need the text to wrap when there isn't enough space. Is there a way to achieve this effect in plain CSS?
https://jsfiddle.net/macu/8axk5qv5/4/
table {
width: 100%;
}
td {
vertical-align: middle;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
}
.line {
border-top: thin solid blue;
}
<table>
<tr>
<td>Title cell with a long title that should wrap</td>
<td><div class="line"></div></td>
<td>Another cell, should wrap</td>
</tr>
</table>
If the text is long enough there should be no line, and the text should wrap normally:
You can put a span or div in each cell, and make them to use white background, then set the line on the table row to create such layout visually.
Check out the fiddle demos below, so you can easily resize and see the wrapping text.
jsFiddle
.table {
width: 100%;
border-collapse: collapse;
}
.table tr {
background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}
.table div {
background: white;
display: inline-block;
}
.middle div {
min-width: 100px; /*remove or adjust value as need*/
}
.last {
text-align: right;
}
<table class="table">
<tr>
<td class="first">
<div>Title cell with a long title that should wrap</div>
</td>
<td class="middle">
<div><!-- This td can be removed if no min-width needed --></div>
</td>
<td class="last">
<div>Another cell, should wrap</div>
</td>
</tr>
</table>
But using flexbox can make it much easier, if you don't have to use table.
jsFiddle
.container {
display: flex;
}
.line {
background: linear-gradient(blue, blue) center/1px 1px repeat-x;
flex: 1;
min-width: 100px; /*remove or adjust value as need*/
}
<div class="container">
<div>Title cell with a long title that should wrap</div>
<div class="line"></div>
<div>Another cell, should wrap</div>
</div>
try by removing the white-space: nowrap; on the TD tag, then target the first and the third TD with
td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}
see if that helps.
I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.
What I want:
I have the following simple HTML:
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
The table itself should be 100% width of the parent container.
I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.
I've prepared a fiddle for this at http://jsfiddle.net/3bumk/
With these background colors I would expect a result like:
Is there any solution for this?
What I get:
My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.
What is no solution (I often found):
It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).
PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)
EDIT I am free to use divs instead of a table too!
Here is an answer using divs instead of a table: DEMO
HTML
<div class="container">
<div class="fnl first">First Baby</div>
<div class="fnl last">Last Guy</div>
<div class="adjust">I will adjust between both of you guys</div>
</div>
CSS
.container{
width: 300px;
}
.first{
float:left;
background: red;
}
.last{
float:right;
background: orange;
}
.adjust{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Something like this? http://jsfiddle.net/NhGsf/
By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;
And setting first and last child to fixed width the middle section will have the rest off the space
min-width in combination with width:100% seems to work in firefox and chrome:
tr {
td:first-of-type {
width: 100%;
}
td:last-of-type {
min-width: 200px;
}
}
I was facing the same challenge and I found the following solution using tables.
The HTML needs to use a DIV in the long column.
The CSS defines your small and extend classes. The hard part being the definition of the extend class.
This gives you the behavior you describe.
HTML
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">
<div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
</td>
<td class="small">Small column</td>
</tr>
</table>
CSS
table {
margin-top: 50px;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color: red;
}
table td:nth-child(2) {
background-color: green;
}
table td:nth-child(3) {
background-color: orange;
}
.extend {
display: table;
table-layout: fixed;
width: 100%
}
.small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can re-arrange the columns by moving the longest one at the end then use nested tables.
CSS
.extend
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
td
{
white-space:nowrap;
}
.box
{
width:1000px;
border:blue solid thick;
overflow:hidden;
}
HTML
<div class="box">
<table width="100%" border="1">
<tr>
<td class="small">First column with text</td>
<td class="small">Small column</td>
<td>
<table>
<tr>
<td class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Except for the ellipsis it is working well. See result
See this fiddle (or, alternatively), you need to set the max-width for each table cell:
body{
width:100%;
padding:0;
margin:0;
}
table {
margin-top: 50px;
width:100%;
max-width:100%;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color:red;
max-width:100px;
}
table td:nth-child(2) {
background-color: green;
overflow:hidden;
max-width:100px;
text-overflow: ellipsis;
white-space: nowrap;
}
table td:nth-child(3) {
background-color: orange;
max-width:100px;
}
I have a fixed-width table of 400px with 3 columns.
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td><td class="narrow">Small1</td><td class="narrow">Small2</td></tr>
</tbody>
</table>
Here is the CSS.
table
{
table-layout: fixed;
width: 400px;
}
td
{
border: 1px solid #000;
white-space: nowrap;
}
td.wide
{
overflow: hidden;
text-overflow: ellipsis;
}
td.narrow
{
}
Here is the JSFiddle.
Currently, each of the 3 columns takes up 1/3 of the space. What I want is for the 2nd and 3rd columns to be as small as possible (without anything hidden or text-wrapped) and have the 1st column take up the remainder of the space (with any text that doesn't fit being hidden).
Depending on the data displayed, the 2nd and 3rd columns may need to be wider or narrower to fit their content, so I don't want to define a fixed size for any column.
Is this possible?
Here is the only solution i found. It's pretty ugly but it does the trick :
http://jsfiddle.net/XA9kY/
The thing is to wrap the string to be overflowing into a .... table
Notice the table into the td.wide
<div style="width:400px; border: 1px solid red;">
<table>
<tbody>
<tr>
<td class="wide">
<table>
<tr>
<td>This is really really long and as much as possible should show but should eventually be cut off.
</td>
</tr>
</table>
</td>
<td class="narrow">Small1</td>
<td class="narrow">Small2</td>
</tr>
</tbody>
</table>
</div>
And here is the magic
td.wide table
{
width: 100%;
table-layout: fixed;
}
td.wide table td
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Just wrapping the string into a table with table-layout: fixed; property does the trick.
Here's my try at this: (Example)
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td>
<td class="rest">Small1</td>
<td class="rest">Small2</td>
</tr>
</tbody>
</table>
CSS
table {
width: 400px;
}
table td {
border: 1px solid #000;
}
td.rest {
width:1px;
}
The only thing is that it doesn't like:
overflow: hidden;
text-overflow: ellipsis;
If that isn't an issue then this should work.
EDIT
A possible solution to hide the text in the wider cell by just setting the height.
Added also the line-height for all the cells so you can change both based on the settings you're after.
Here the (Example)
table {
width: 400px;
}
table td {
border: 1px solid #000;
line-height:26px;
}
td.rest {
width:1px;
white-space: nowrap;
}
td.wide {
overflow:hidden;
height:26px;
display:block;
}
i have a table with fixed-width content. which does not always fit.
i would like to truncate the text to a fixed width and append an ellipsis. the full text should be visible when hovering the text. this works fine, except that the now visible text covers text to its right. how can i prevent this?
this is what i've got so far.
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.truncate:hover {
overflow: visible
}
jsFiddle
Here is how your approach could be improved so text will be readable when hovered.
Updated HTML:
<table>
<tr>
<td><span><a class="truncate">faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla</a></span>
</td>
<td>
<span>
<a class="truncate">
faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
</a>
</span>
</td>
</tr>
</table>
See how <a> is now wrapped with <span>.
And here is updated CSS:
td {
width: 5em;
}
span {
height:1.2em;
position:relative;
display: inline-block;
}
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.truncate:hover {
position:absolute;
max-width: none;
background:#fff;
z-index:100;
overflow:visible;
}
span is relatively positioned, so absolute item inside it will be shown in a new layer and will take virtually no space (will not shift other text when overflow:hidden removed).
a.truncate will now became absolutely positioned on hover and will loose max width restriction. background:#fff is required to
Demo
Add a title attribute to your tag and remove the hover CSS:
HTML
<table>
<tr>
<td>
<a class="truncate" title="faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla">
faksjfaklsjf asjf lajslfk jasklfj alkjsfkl jalskfjla
</a>
</td>
<td>
<a class="truncate" title="faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl">
faskfjalskfj alkfj laksj flkajfl kajfl ajfkl ajsl
</a>
</td>
</tr>
</table>
CSS
td {
width: 5em;
}
.truncate {
max-width: 5em;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
Fiddle here