как скрыть переполнение строки таблицы?

<p>у меня есть несколько таблиц html, где текстовые данные слишком велики, чтобы уместиться. таким образом, он расширяет ячейку вертикально, чтобы приспособиться к этому. так что теперь строки с переполнением в два раза больше строк с меньшим количеством данных. это неприемлемо. как заставить таблицу иметь одинаковую высоту строки <code>1em</code>?</p><p>вот некоторая разметка, которая воспроизводит проблему. таблица должна иметь высоту только одну строку, а переполняемый текст скрыт.</p><pre><code><!doctype html> <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> table { width:250px; } table tr { height:1em; overflow:hidden; } </style> </head> <body> <table border="1"> <tr> <td>this is a test.</td> <td>do you see what i mean?</td> <td>i hate this overflow.</td> </tr> </table> </body> </html> </code></pre>

<p>необходимо указать два атрибута: <code>table-layout:fixed</code> для <code>table</code> и <code>white-space:nowrap;</code> в ячейках. вам также нужно переместить <code>overflow:hidden;</code> в ячейки</p><pre><code>table { width:250px;table-layout:fixed; } table tr { height:1em; } td { overflow:hidden;white-space:nowrap; } </code></pre><p><strong> <a href="http://jsbin.com/ixetu">вот демо</a> </strong>. протестировано в firefox 3.5.3 и ie 7 </p>

<p>в общем, если вы используете <code>white-space: nowrap;</code>, это, вероятно, потому, что вы знаете, какие столбцы будут содержать содержимое, которое оборачивает (или растягивает ячейку). для этих столбцов я обычно обертываю содержимое ячейки в <code>span</code> с определенным атрибутом <code>class</code> и применяю определенный <code>width</code>.</p><p>пример:</p><p><strong>html</strong>:</p><pre><code><td><span class="description">my really long description</span></td> </code></pre><p><strong>css</strong>:</p><pre><code>span.description { display: inline-block; overflow: hidden; white-space: nowrap; width: 150px; } </code></pre>

<p>в большинстве современных браузеров вы можете указать:</p><pre><code><table> <colgroup> <col width="100px" /> <col width="200px" /> <col width="145px" /> </colgroup> <thead> <tr> <th>my 100px header</th> <th>my 200px header</th> <th>my 145px header</th> </tr> </thead> <tbody> <td>100px is all you get - anything more hides due to overflow.</td> <td>200px is all you get - anything more hides due to overflow.</td> <td>100px is all you get - anything more hides due to overflow.</td> </tbody> </table> </code></pre><p>затем, если вы примените стили из постов выше, как показано ниже:</p><pre><code>table { table-layout: fixed; /* this enforces the "col" widths. */ } table th, table td { overflow: hidden; white-space: nowrap; } </code></pre><p>результат дает вам хорошо скрытое переполнение по всей таблице. работает в последних версиях chrome, safari, firefox и ie. я не тестировал в ie до 9 - но я предполагаю, что он вернется к 7, и вам может даже посчастливиться увидеть поддержку 5.5 или 6. ;)</p>

<p>вот кое-что, что я попробовал. по сути, я помещаю «гибкий» контент (тд, который содержит слишком длинные строки) в контейнер div, высота которого составляет одну строку, со скрытым переполнением. тогда я позволил тексту обернуться невидимым. вы получаете перерывы на словосочетаниях, а не просто плавное отключение.</p><pre><code>table { width: 100%; } .hideend { white-space: normal; overflow: hidden; max-height: 1.2em; min-width: 50px; } .showall { white-space:nowrap; } <table> <tr> <td><div class="showall">show all</div></td> <td> <div class="hideend">be a bit flexible about hiding stuff in a long sentence</div> </td> <td> <div class="showall">show all this too</div> </td> </tr> </table> </code></pre>

<blockquote> <p>единственным недостатком (кажется) является то, что ширина ячейки таблицы одинакова. любой способ обойти это? - джош стодола 12 октября в 15:53</p> </blockquote><p>просто определите ширину таблицы и ширину для каждой ячейки таблицы</p><p>что-то вроде </p><pre><code>table {border-collapse:collapse; table-layout:fixed; width:900px;} th {background: yellow; } td {overflow:hidden;white-space:nowrap; } .cells1{width:300px;} .cells2{width:500px;} .cells3{width:200px;} </code></pre><p>это работает как шарм: о)</p>

<p>обернуть таблицу в <strong>div</strong> с помощью class = "container"</p><pre><code>div.container { width: 100%; overflow-x: auto; } </code></pre><p>затем </p><pre><code>#table\_id tr td { white-space:nowrap; } </code></pre><p>результат </p><p> <a href="https://i.stack.imgur.com/lwp9w.jpg"> <img src="https://i.stack.imgur.com/lwp9w.jpg" alt="overflow effect"> </a> </p>