CSS / Javascript, чтобы заставить строку таблицы HTML на одной строке - PullRequest
Новая
       8

CSS / Javascript, чтобы заставить строку таблицы HTML на одной строке

65 голосов
/ 09 января 2009

У меня есть 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, чтобы попытаться получить это, но я не могу заставить его работать правильно. Mootables - единственное, что я нашел, что делает это: 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 ]

88 голосов
/ 09 января 2009

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

Обновление

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

<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 поместит многоточие в случае переполнения, используя специфический для браузера переполнение текста: стиль многоточия. Есть способ сделать то же самое в FireFox автоматически, но я сам не проверял.

Обновление 2

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

30 голосов
/ 09 января 2009

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

Этот CSS должен работать с вашим примером HTML: 

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

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

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

7 голосов
/ 09 января 2009

Попробуйте: 

td, th {
  white-space: nowrap;
  overflow: hidden;
}
2 голосов
/ 20 июня 2009

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

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

Похоже, что полная репликация использования (100) * MS (и других) не может быть дублирована в 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(VS.85).aspx

Надеюсь, это поможет какому-то телу.

1 голос
/ 09 января 2009

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

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

0 голосов
/ 28 февраля 2018

Положение использования: абсолютное; и ширина: ххх%; на тд-элемент.

0 голосов
/ 11 января 2009

Если вы не хотите, чтобы текст был перенесен, и вы не хотите, чтобы размер столбца увеличивался, установите ширину и высоту столбца и установите «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 - это относительный размер шрифта для высоты, если вы используете пиксели для установки размера шрифта, вы можете использовать его вместо этого.

0 голосов
/ 09 января 2009

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

0 голосов
/ 09 января 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...