Css table text overflow ellipsis

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Ellipsis for text overflow in table cell? #454

Ellipsis for text overflow in table cell? #454

Comments

I was wondering if it is possible to have the table behave like when I set table-layout: fixed; on the table and then text-overflow:ellipsis on the cell, so the text will always be on a single line with .

I tried to play with the css but no luck.

The text was updated successfully, but these errors were encountered:

I tried but it does not work, the text is on a single line and trimmed but the overflow is not replaced by the ellipsis.

I also tried on the example here adding long text to a cell and then play with the css but I get the same result, no ellipsis showing

That’s right, I did not include all the details. This should work:

.cell < position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; display: block; padding: 8px; width: 100%; > .cell-overflow < box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; >

div class pl-s">cell"> div class pl-s">cell-overflow"> Long content. div> div>

In my use case, overflow:hidden is also needed in the cell-overflow class

@tkirda Thanks, you just saved my day!

Now in 2017 useful with fixed-data-table-2 also !

No need to use two div wrappers, just set

No need to use two div wrappers, just set

Many thanks btw all of the columns have the same width size. how to make size of the first column is smallest?

There is width property on the column.

If you go this route, you HAVE to manually set a width on every column on every table in your entire app, if you want anything other than forced equal-width columns. This is a nightmare in a large application. I still have not found a solution which preserves one of the biggest advantages html tables give us — intelligent auto-sizing of columns. With this approach you’re hobbling that completely.

Источник

How To Make CSS Ellipsis Work on a Table Cell

To make an ellipsis work on a table cell, you can use the CSS display property set to its «block» or «inline-block» value.

In our example below, besides the display property, we set the text-overflow to «ellipsis», use the «nowrap» value of the white-space property, set the overflow to «hidden». Also, we specify the width and border of our element.

Example of adding an ellipsis on a table cell with the CSS display property:

html> html> head> title>Title of the document title> style> td < display: block; border: 2px solid #000; width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; > style> head> body> table> tbody> tr> td>Hello World td> tr> tbody> table> body> html>

Result

Solution with the CSS table-layout property

Another possible way of making an ellipsis work on a table cell is using the CSS table-layout property with its «fixed» value on the and specifying its width.

Example of adding an ellipsis on a table cell with the CSS table-layout and width properties:

html> html> head> title>Title of the document title> style> table < table-layout: fixed; width: 60px; > td < border: 2px solid #000; width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; > style> head> body> table> tbody> tr> td>Hello World td> tr> tbody> table> body> html>

Источник

my2cents

«The Earth was made round so that we would not see too far down the road» — Karen Blixen

Techniques how to use ellipsis in table columns

The CSS3 text-oveflow property allows to have content not exceed a certain limit. Browsers can be asked to place ellipsis, the … “character”, after the last visible character rather than just cutting content off. It’s a nice visual indication for readers that there’s actually more content than what is shown. Later you’ll learn techniques how to use ellipsis in fixed-width or max-width table columns using HTML and CSS.

Before text-overflow supported ellipsis in most browsers (i.e. before maybe 2011) your only option was to use complicated font-metrics calculations on the server, cut-off the content after a certain number of characters, and append … manually. The results were obviously dissatisfying because one could never get this quite right across all browsers. Besides, since you don’t have control over the font-sizes in browsers it always remained a poor approach.

General remarks

The CSS instruction text-overflow: ellipsis can be used in various places but it always has to be applied to the HTML container that hosts your content. The container is for example a or a paragraph – or a table cell. Also, it should be accompanied by the overflow: hidden CSS instruction. This is an indication to the browser that under no circumstances you want “excessive” content to be displayed.

Ellipsis in table columns

Consider the following requirements

• you have tabular content in two columns
• both columns combined must use at most N pixels
• the right column has a fixed with of n pixels
• the left column should use as few pixels as possible (at most N – n obviously)
• and if the content in the left column exceeds the available space it should be cut off using ellipsis

The code

Based on discussion on Stackoverflow here are three techniques:

    
 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 
ST.2012.10.17.006
 
 
 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 
ST.2012.10.17.006
 
 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
 
ST.2012.10.17.006
 
  

Results in different browsers

Safari on OS X

Firefox on OS X

Firefox on Windows 7

IE 9 on Windows 7

IE9 in quirks mode in Window 7

Conclusion

Contact me if you have an idea how to make this work for IE9 in quirks mode ;-). For all other browsers I favor the second approach over the third. I only use CSS float if there’s no other option because with every float you need a clear, too.

Источник

How to get text-overflow ellipsis working on a table cell

If you’re looking for a way to clip a long text inside a table cell with an ellipsis, instead of wrapping to multiple lines, here’s some useful trick working on IE8+.

Exemple using CSS table and table-cell :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.
 
Lorem ipsum
 
 

.table < display:table; width:100%; border-collapse:collapse; >.table-cell < display:table-cell; >.cell-full < max-width:1px; width:100%; >.cell-ellipsis < overflow:hidden; white-space:nowrap; text-overflow:ellipsis; >.cell-noWrap

• cell-full forces element to take all remaining space.
• cell-ellipsis get the CSS text-overflow ellipsis working.
• cell-noWrap prevents text content from splitting / breaking.

If you get trouble with borders making the table not fit the container, just add some box-sizing :

 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.
 
Lorem ipsum
 
 

• Article précédent : Un fix jQuery pour utiliser placeholder sur IE8/IE9 Publié le 20/12/2013 Dans la catégorie : jQuery
• Article suivant : Un menu accordéon (« Accordion effect ») en jQuery Publié le 21/08/2016 Dans la catégorie : jQuery

Commentaires (2)

Источник