CSS / Javascript для принудительной строки таблицы html в одной строке

У меня есть таблица HTML, которая выглядит так:

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

но я хочу, чтобы скрыть переполнение. Причина здесь в том, что текст содержит ссылку на более подробную информацию, и наличие "обертывания" тратит много места в моем макете. Это должно быть так (без увеличения ширины столбцов или таблицы, потому что они уйдут с экрана/создадут горизонтальную полосу прокрутки в противном случае):

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------

Я пробовал много различных методов CSS, чтобы попытаться получить это, но я не могу заставить это получиться правильно. Спорные-это единственное, что я нашел, что делает это:http://joomlicious.com/mootable/, но я не могу понять, как они это делают. Кто-нибудь знает, как я могу сделать это с моей собственной таблицей, используя CSS и/или Javascript, или как это делает Mootables?

пример HTML:

<html><body>
<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table></body></html>
9 64
javascript html css

9 ответов:

используйте свойство CSS белый-пространство: без переноса и переполнение: скрытый на вашем тд.

обновление

просто увидел ваш комментарий, не уверен, что я думал, я делал это так много раз, я забыл, как я это делаю. Это подход, который хорошо работает в большинстве браузеров для меня... вместо того, чтобы пытаться ограничить td, я использую div внутри td, который будет обрабатывать экземпляр переполнения. Это имеет хороший побочный эффект, чтобы иметь возможность добавить ваши отступы, поля, цвета фона и т. д. к вашему div вместо того, чтобы пытаться стиль td.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
        this is the text in column one which wraps</div></td>
   <td>
    <div class="hideextra" style="width:100px">
        this is the column two test</div></td>
</tr>
</table>
</body>
</html>

в качестве бонуса IE разместит многоточие в случае переполнения с использованием специфичного для браузера текста-overflow: ellipsis style. Есть способ сделайте то же самое в FireFox автоматически тоже, но я не проверял это сам.

обновление 2

Я начал использовать этот код усечения Джастин Максвелл в течение нескольких месяцев, который работает должным образом в FireFox тоже.

84

этот трюк здесь использует эзотерические table-layout:fixed правила

этот CSS должен работать против вашего образца HTML:

table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

вы также должны указать явные ширины столбцов для <td> s.

The table-layout:fixed правило говорит: "ширина ячеек этой таблицы зависит от того, что я говорю, а не от фактического содержания в ячейках". Это полезно обычно, потому что браузер может начать отображать таблицу после того, как он получил первый <tr>. В противном случае, браузер должен получить всю таблицу, прежде чем он сможет вычислить ширину столбца.

28

попробуй:

td, th {
  white-space: nowrap;
  overflow: hidden;
}
7

для тех, кто заинтересован в дальнейшем:

существующие ячейки динамической таблицы: # # длинный текст без пробелов, т. е. адреса электронной почты ##

появляется полная репликация MS (и других) использование text-overflow:ellipsis Не может быть обманут в FireFox до тех пор, как добавить внутренне добавленный … к обрезанному тексту относится; особенно без javascript, который часто отключается Пользователем в эти дни.

все идеи, которые я нашел, чтобы помочь мне решить не удалось динамические изменение размера и длинный текст без пробелов.

тем не менее, мне нужно было обрезать динамическую таблицу ширины в одном из моих окон администратора progs. Таким образом, с небольшим скрипом приемлемый ответ на все браузеры может быть взломан из предоставленных образцов в "MSDN".

т. е. 

<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>

<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
    font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>

</td>
</tr>
</table>

только небольшой недостаток-пользователи Firefox не видят бит"..."; который является сумминком, я действительно не возражаю на этом этапе.

будущий FF должен, надеюсь, решить изящно, если реализация этого очень важного полезного варианта. Так что теперь мне не нужно переписывать, используя менее благоприятный футуристический не представленный контент (не спорьте, в наши дни есть много сломанных веб-сайтов).

спасибо: http://msdn.microsoft.com/en-us/library/ms531174(против.85).аспн

надеюсь, это поможет некоторым БПК.

2

Как сказал Клетус, вы должны использовать white-space: nowrap чтобы избежать обертывания линии, и overflow:hidden чтобы скрыть переполнения. Однако для того, чтобы текст считался переполненным, необходимо установить ширину td/th, поэтому в случае, если текст требует больше указанной ширины, он будет считаться переполнением и будет скрыт.

кроме того, если вы даете пример веб-страницы, ответчики могут предоставить обновленную страницу с исправлением вам нравится.

1

Если вы скрываете переполнение и есть длинное слово, вы рискуете потерять это слово, так что вы можете пойти на один шаг дальше и использовать атрибут css "word-wrap".

http://msdn.microsoft.com/en-us/library/ms531186 (VS. 85). aspx

0

интересно, Стоит ли использовать PHP (или другой язык сценариев на стороне сервера) или Javascript для усечения строк до нужной длины (хотя вычисление правильной длины сложно, если вы не используете шрифт фиксированной ширины)?

0

использовать позицию: абсолютная; и ширина: xxx%; на td-элементе.

0

Если вы не хотите, чтобы текст переносился, и вы не хотите, чтобы размер столбца увеличивался, установите ширину и высоту столбца и установите "overflow: hidden" в своей таблице стилей.

чтобы сделать это только на одном столбце, вы хотите добавить класс к этому столбцу в каждой строке. В противном случае вы можете установить его на все столбцы, которые вы.

Html:

<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td class="column-1">this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table>

stylsheet:

.column-1
{
  overflow: hidden;
  width: 150px;
  height: 1.2ex; 
}

единица ex-это относительный размер шрифта для высоты, если вы используйте пиксели для установки размера шрифта, который вы можете использовать вместо этого.

-1