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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
Используйте CSS-свойство белое пространство: nowrap и переполнение: скрыто на своем td.
Обновлять
Только что увидел ваш комментарий, не уверен, о чем я думал, я делал это так много раз, что забыл, как я это делаю. Этот подход хорошо работает в большинстве браузеров для меня ... вместо того, чтобы пытаться ограничить 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 будет помещать многоточие в случае переполнения, используя специфичный для браузера стиль text-overflow: ellipsis. Также есть способ сделайте то же самое в FireFox автоматически, но я сам его не тестировал.
Обновление 2
Я начал использовать этот код усечения Джастина Максвелла в течение нескольких месяцев, который также правильно работает в FireFox.
сейчас смотрю обновление: Замечательно! Это именно то, что я хотел.
Еще одно обновление ... Firefox поддерживает переполнение текста с момента выхода Firefox 7 в конце 2011 года. И теперь они даже поддерживают экспериментальные теги, которых нет в других браузерах. developer.mozilla.org/en/CSS/text-overflow
Пытаться:
td, th {
white-space: nowrap;
overflow: hidden;
}
Как сказал Клетус, вы должны использовать white-space: nowrap, чтобы избежать переноса строк, и overflow:hidden, чтобы скрыть переполнение. Однако, чтобы текст считался переполненным, вы должны установить ширину td / th, поэтому, если текст требует больше, чем указанная ширина, он будет считаться переполнением и будет скрыт.
Кроме того, если вы предоставите образец веб-страницы, респонденты могут предоставить обновленную страницу с нужным вам исправлением.
Если вы скрываете переполнение и появляется длинное слово, вы рискуете потерять это слово, поэтому вы можете пойти еще дальше и использовать атрибут css "word-wrap".
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
Интересно, но мне все равно, если я потеряю слово. Меня просто интересует предварительный просмотр.
Интересно, стоит ли использовать PHP (или другой язык сценариев на стороне сервера) или Javascript для усечения строк до нужной длины (хотя вычислить правильную длину сложно, если вы не используете шрифт фиксированной ширины)?
Этот трюк основан на эзотерическом правиле table-layout:fixed.
Этот CSS должен работать с вашим образцом HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
Вы также должны указать явную ширину столбцов для <td>.
Правило table-layout:fixed гласит: «Ширина ячеек этой таблицы зависит от того, что я говорю, а не от фактического содержимого ячеек». Обычно это полезно, потому что браузер может начать отображение таблицы после получения первого <tr>. В противном случае браузер должен получить всю таблицу, прежде чем он сможет вычислить ширину столбцов.
Если вы не хотите, чтобы текст переносился, и вы не хотите, чтобы размер столбца увеличивался, установите ширину и высоту столбца и установите «overflow: hidden» в таблице стилей.
Чтобы сделать это только для одного столбца, вам нужно добавить класс в этот столбец в каждой строке. В противном случае вы можете установить его для всех столбцов, это зависит от вас.
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>
стилистический лист:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
Единица ex - это относительный размер шрифта для высоты, если вы используете пиксели для установки размера шрифта, вы можете использовать это вместо этого.
Для тех, кому интересно:
Существующие ячейки динамической таблицы: ## Длинный текст без ПРОБЕЛОВ, т.е. адреса электронной почты ##
Похоже, что полная репликация использования text-overflow:ellipsis в MS (и других) не может быть дублирована в 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
Надеюсь, это поможет телу.
Использовать положение: абсолютное; и ширина: xxx%; на td-Element.
Если вам нужно написать текст в одну строку, поместите этот код
white-space:nowrap
На самом деле я пробовал это. Он просто расширяет таблицу, заставляя ее оставаться на одной строке, но увеличивая ширину таблицы. Обновляю вопрос, чтобы уточнить.