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:

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

ОТВЕТЫ

Ответ 1

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

Update

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

Обновление 2

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

Ответ 2

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

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

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

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

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

Ответ 3

Try:

td, th {
  white-space: nowrap;
  overflow: hidden;
}

Ответ 4

Для тех, кого это интересует:

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

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

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

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

Будущее FF должно, мы надеемся, изящно разрешить, если вы примете этот очень важный полезный вариант. Так что теперь мне не нужно переписывать, используя менее благоприятный футуристический контент без контента. (Не спорьте: в наши дни много избитых веб-сайтов вокруг причины этого).

Благодаря: http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

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