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

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

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

Ответ 1

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

TAKE 2

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

ОБНОВЛЕНИЕ 3

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

Ответ 2

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

table { white-space: nowrap; }

Ответ 3

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

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

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

Ответ 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>