Best Way To Handle Long Length Entries In CSS Tables? - SitePoint Trang chủ » Html Table Td Text Too Long » Best Way To Handle Long Length Entries In CSS Tables? - SitePoint Có thể bạn quan tâm Html Table Td Width Html Table Td Width Auto Html Table Th Column Span Html Table Th Column Width Html Table Th Hide Column Loading Best way to handle long length entries in CSS tables? HTML & CSS BKZ November 25, 2012, 6:22am 1 I am working with CSS tables and required to display URLs in few of the columns. As you would imagine some of the URLs are way too long to be included in a table as a result of which cruel re sizing is performed within the table ( two rowed entries, table floats to the right etc. ). What are the best practices to handle entries in such cases? Doing some like “half of the entry and then…” or “half entry here … a little bit here” would be the right way to go or is there some better way around it? Thanks markbrown4 November 25, 2012, 7:11am 2 Depends on the content, you can use white-space:nowrap to prevent wrapping if you want it to blow out the width that you can scroll to. If it’s just the URL’s that are causing problems then showing the first 20 chars or so should work. There’s no one right way to handle it, depends on the content and design. PaulOB November 25, 2012, 3:24pm 3 Hi, You can make the content break to a new line using word-wrap:break-word which has good support now and will force the unbroken url to wrap. You need to use it on an inner element rather than a table-cell as some browsers are picky. Or you could use text-overflow:ellipsis which will truncate the url and apply three dots at the end and is supported in modern browsers. Or you could do the same as above and then let the url expand on hover so its visible. Example of all three in a css table: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> .outer { display:table; width:500px; border-spacing:20px; table-layout:fixed; margin:25px; border:1px solid red; } .cell { display:table-cell; border:1px solid #000; padding:5px; } .url{margin:10px 0;padding:2px 4px} .outer1 .url{word-wrap:break-word} .outer2 .url{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .outer3 .url:hover{ overflow:visible; background:#fcf; display:table; position:relative; padding:0; border-spacing:0; border:1px solid red; } </style> </head> <body> <div class="outer outer1"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> </div> <div class="outer outer2"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> </div> <div class="outer outer2 outer3"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> <div class="cell"> <p class="url"><a href="#">along url</a></p> </div> </div> </body> </html> ronpat November 25, 2012, 7:34pm 4 Paul, I think you unearthed a little Firefox bug… Modified the text string with underscores so the bleedthru of the ellipsis in the second box would be obvious in the screenshot. PaulOB November 25, 2012, 8:51pm 5 ronpat: Paul, I think you unearthed a little Firefox bug… Modified the text string with underscores so the bleedthru of the ellipsis in the second box would be obvious in the screenshot. Hi Ron, Which version is that? My Firefox 16.0.2 doesn’t look like that. What happens if you remove the ellipses on hover. e.g. .outer3 .url:hover{ text-overflow:inherit; overflow:visible; background:#fcf; display:table; position:relative; padding:0; border-spacing:0; border:1px solid red; } ronpat November 25, 2012, 9:14pm 6 The latest and greatest: FF17.0 I had already removed {text-overflow:ellipsis} from .outer3 since it was being applied by .outer2. Didn’t make any difference. Now I’m really curious…! PaulOB November 25, 2012, 9:22pm 7 Hi, Just upgraded to FF17 and it still works for me. Are you on a PC or a mac? Did you change the code in any way as I can’t reproduce it here. ronpat November 25, 2012, 9:23pm 8 .outer3 .url:hover {z-index:1} fixes it. ronpat November 25, 2012, 9:50pm 9 This is the code that demonstrates the bleedthru on my screen. Restarted FF with addons disabled (Safe Mode); bleedthru still visible. Odd. I would think that .outer3 .url:hover {position:relative} alone should prevent that. I’m using a PC; WinXPPro, SP3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- http://www.sitepoint.com/forums/showthread.php?925838-Best-way-to-handle-long-length-entries-in-CSS-tables Code by Paul O'B --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> .outer { display:table; width:500px; border-spacing:20px; table-layout:fixed; margin:25px; border:1px solid red; } .cell { display:table-cell; border:1px solid #000; padding:5px; vertical-align:middle; /* added */ } .url { margin:10px 0; padding:2px 4px; } .outer1 .url { word-wrap:break-word; } .outer2 .url { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .outer3 .url:hover { text-overflow:inherit; overflow:visible; background:#fcf; display:table; position:relative; padding:0; border-spacing:0; border:1px solid red; /* z-index:1; /* fixes bleedthru of ellipsis */ } </style> </head> <body> <div class="outer outer1"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">{word-wrap:break-word;}</a></p> </div> <div class="cell"> <p class="url"><a href="#">ashorturl</a></p> </div> </div> <div class="outer outer2"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}</a></p> </div> <div class="cell"> <p class="url"><a href="#">ashorturl</a></p> </div> </div> <div class="outer outer2 outer3"> <div class="cell"> <p class="url"><a href="#">alongurlthatpushesthecellwide___ifnothandledcorrectly</a></p> </div> <div class="cell"> <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;display:table;}</a></p> </div> <div class="cell"> <p class="url"><a href="#">ashorturl</a></p> </div> </div> </body> </html> PaulOB November 25, 2012, 10:14pm 10 Ah ok I’ve just realised what you were saying and its the ellipses of the next element that shows through. I thought your image was showing an ellipsis in place on the current entry as I didn’t have any other long urls in my example. It looks as though Firefox is creating a stacking context for the ellipses to make sure its on top of the text so as you suggest adding a higher z-index fixes the problem. Well spotted Related topics Topic Replies Views Activity An url in my cell is enlarging it HTML & CSS 1 199 October 21, 2010 Html tables size HTML & CSS html 13 3114 May 10, 2018 Table breaks layout with long characters HTML & CSS 6 1079 November 19, 2010 How do we break long words mid-word in a table cell? HTML & CSS 5 16290 October 8, 2014 Long URLs in IE HTML & CSS 1 469 October 8, 2014 Từ khóa » Html Table Td Text Too Long CSS Text-overflow In A Table Cell? How To Use Text-overflow In A Table Cell ? - GeeksforGeeks Text-overflow - CSS: Cascading Style Sheets - MDN Web Docs Text Overflow Table Cell - CodePen Wrap Or Break Long Word (text) In HTML Table Cell - Dev Bay Wrap Long Word (text) In Table Cell - Dev Bay How To Make CSS Ellipsis Work On A Table Cell - W3docs CSS Text-overflow In A Table Cell - ITecNote How To Break Long Words In An HTML (or CSS) Table - Design-fluide CSS Text-overflow Property - W3Schools CSS Word-wrap Property - W3Schools Css Table Td Text Wrap Code Example White-space - CSS-Tricks Wrap Long Text (without Space) In Html Table Cell - MSDN - Microsoft
