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

Question

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

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

• Столбец таблицы должен оставаться в одной строке (HTML / CSS / Javascript)
• CSS: ограничение элемента до 1 строки

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

Что я делаю не так?

Answer 1

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

table { white-space: nowrap; }

Answer 2

Переполнение

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

TAKE 2

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

ОБНОВЛЕНИЕ 3

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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