Как ограничить ячейку таблицы одной строкой текста с помощью CSS?

У меня есть таблица пользователей, где каждая строка содержит их имена, адрес электронной почты и т. Д. Для некоторых пользователей эта строка является одной текстовой строкой высокой, для некоторых других - двумя и т. Д. Но я бы хотел, чтобы каждая строка таблицы была одной текстовой строкой высокой, обрезая остальные.Как ограничить ячейку таблицы одной строкой текста с помощью CSS?

Я видел эти два вопроса:

На самом деле мой вопрос заключается в точности похож на первый, но так как ссылка мертва, я не могу учиться Это. В обоих ответах используется white-space: nowrap. Однако это не сработает, может быть, я что-то упустил.

Поскольку я не могу показать вам код, я воспроизвел эту проблему:

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div>

Без white-space таблица 500px в ширину, а текст занимает более одной строки.

Но white-space: nowrap заставляет браузер просто игнорировать директиву width и увеличивать ширину таблицы до тех пор, пока все данные не войдут в одну строку.

Что я делаю неправильно?

источник

2010-07-31 Tomaka17

Не в этом примере, но на моем настоящем сайте да. Во всяком случае, я не думаю, что не связано с этой проблемой. – Tomaka17

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

TAKE 2

Попробуйте добавить table-layout: fixed; width:500px; стиля таблицы.

UPDATE 3

подтвердил это сработало: http://jsfiddle.net/e3Eqn/

источник

2010-07-31 18:01:46

Я уже пробовал это, прежде чем задавать вопрос, и он тоже не работает.Я редактировал вопрос, чтобы добавить его – Tomaka17

@ Tomaka17, я отредактировал мой вопрос, чтобы добавить дополнительные инструкции. –

Есть ли способ сказать «переполнение - это то, что было бы размером элемента, если бы этот элемент не был в нем»? – Claudiu

Добавьте следующую таблицу стилей:

table{ 
    width: 500px; table-layout:fixed; 
}

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

источник

2010-07-31 18:42:27 cm2

Спасибо, я даю вам +1 Однако я отмечаю ответ Майка Шерова как принятый, так как я узнал о существовании переполнения текста благодаря ему – Tomaka17

+1. Это было довольно близко. –

Добавьте следующую таблицу стилей:

table { white-space: nowrap; }

источник

2013-08-06 09:19:20 Googuez

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

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

источник

2015-05-14 08:34:39 user2782717

Как ограничить ячейку таблицы одной строкой текста с помощью CSS?

ответ

Смежные вопросы