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, чтобы попытаться получить это, но я не могу заставить это оказываться правым. Mootables является единственной вещью, я нашел, что это делает это: http://joomlicious.com/mootable/, но я не могу выяснить, как они делают это. Кто-либо знает, как я могу сделать это со своей собственной таблицей с помощью CSS и/или JavaScript, или как Mootables делает это?

Демонстрационный HTML:


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

68
задан ine 8 January 2009 в 23:24
поделиться

8 ответов

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

Обновление

Просто видело Ваш комментарий, не уверенный, что я думал, я сделал это так много раз, я забыл, как я делаю это. Это - подход, который работает хорошо в большинстве браузеров для меня... вместо того, чтобы пытаться ограничить td, я использую отделение в td, который обработает экземпляр переполнения. Это имеет хороший побочный эффект способности добавить Ваше дополнение, поля, цвета фона, и т.д. Вашему отделению вместо того, чтобы пытаться разработать 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 стиля. Существует путь к , делают то же в FireFox автоматически также, но я не протестировал его сам.

Обновление 2

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

93
ответ дан EstevaoLuis 7 November 2019 в 10:16
поделиться

Этот прием здесь использует тайное table-layout:fixed правило

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

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

также необходимо определить явную ширину столбцов для <td> с.

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

30
ответ дан Triptych 7 November 2019 в 10:16
поделиться

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

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

1
ответ дан splintor 7 November 2019 в 10:16
поделиться

Попытка:

td, th {
  white-space: nowrap;
  overflow: hidden;
}
7
ответ дан cletus 7 November 2019 в 10:16
поделиться

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

0
ответ дан Ben 7 November 2019 в 10:16
поделиться

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

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

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; 
}

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

-1
ответ дан John_ 7 November 2019 в 10:16
поделиться

Если Вы скрываете переполнение и существует длинное слово, Вы рискуете освобождать то слово, таким образом, Вы могли пойти один шаг вперед и использовать "переход на новую строку" css атрибут.

http://msdn.microsoft.com/en-us/library/ms531186 (По сравнению с 85) .aspx

0
ответ дан Jobo 7 November 2019 в 10:16
поделиться

Для тех, кто дополнительно интересуется:

Существующие ячейки динамической таблицы: ## Длинный текст без ПРОБЕЛОВ, т.е. адреса электронной почты ##

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

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

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

Надеюсь, это поможет некоторым телам.

2
ответ дан 24 November 2019 в 14:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: