запретить перенос текста в ячейке таблицы —с пустым столбцом
Кто-нибудь знает, как я могу предотвратить перенос текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее, чем данные под ним, но мне нужно, чтобы он отображался только в одной строке. Это нормально, если колонна очень широкая.
HTML моей (упрощенной) таблицы выглядит так:
<table> <thead> <tr> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> </tr> </thead> <tbody> <tr> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> </tr> </tbody>
Сам заголовок завернут в div внутри тега th по причинам, относящимся к javascript на странице.
Таблица выходит с заголовками, обернутыми на несколько строк. Это, кажется, происходит только тогда, когда таблица достаточно широка, так как браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.
th {
white-space: nowrap;
}возникли проблемы, потому что у меня есть пустой заголовок таблицы
Есть идеи?
staticПоделиться Источник Selva Ganapathi 09 февраля 2018 в 13:08
2 Ответа
2
table th, table td{
white-space: nowrap !important;
}
Это делает трюк. Не забудьте добавить !important
, чтобы переопределить любой другой стиль пробела, который может повлиять на тот, который вы хотите реализовать.
table th, table td{
white-space: nowrap !important;
}
<table border="1"> <thead> <tr> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> </tr> </thead> <tbody> <tr> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> </tr> </tbody>
Поделиться Luis felipe De jesus Munoz 09 февраля 2018 в 13:12
1
Примените white-space: nowrap;
к элементам <th>
.
Вот пример: https://jsfiddle.net/b1e0x672/2/ с некоторым дополнением, чтобы держать его хорошо на глазах. Вы, вероятно, захотите сделать свой CSS более конкретным, чем мой, чтобы ничто не мешало его стилю.
Вы также можете заметить, что я применил вертикальное выравнивание к элементам td. Если вы примените vertical-align: top;
к своим элементам <td>
, то они всегда будут начинаться прямо под вашим заголовком, а не в середине таблицы.
Поделиться Aonghas M 09 февраля 2018 в 13:18
Перенос текста в SSRS
Как выполнить перенос текста полей таблицы в отчете SSRS и правильное озеленение при рендеринге отчета в формат PDF?
Как изменить цвет текста в ячейке таблицы
Я не могу найти никаких примеров того, как изменить цвет текста в любой ячейке таблицы данных. Если кто-нибудь знает, как это сделать, пожалуйста, помогите мне. Я использую таблицу данных в…
Отображение только одной строки текста в ячейке таблицы Я нашел несколько решений CSS для отображения только одной строки текста в элементе, текстовое содержимое которого в противном случае занимало бы несколько строк. Однако они не работают, когда…
Открыть XML SDK обработка текста вертикальная ориентация в ячейке таблицы
Кто-нибудь знает, как я могу переключить ориентацию текста в ячейке таблицы на 90 градусов? Я создаю некоторые шаблоны меток в Word с Open XML, а некоторые нуждаются в вертикальной ориентации…
WPF DataGrid перенос текста ячейки-установить значение NoWrap (False)
Как мне установить TextWrapping каждой ячейки в WPF DataGrid в NoWrap? Я понимаю, что сама ячейка не имеет свойства TextWrapping, но я хотел бы установить свойство на элементе управления в ячейке….
Ограничить перенос слов по определенному столбцу таблицы с помощью CSS
Я хотел бы ограничить перенос слов по тексту в одном столбце таблицы. В принципе, я хочу, чтобы эквивалент white-space: nowrap на каждой ячейке во втором столбце таблицы. Дело в том, что я не могу…
JavaFX гиперссылка в выделенной ячейке таблицы CSS
Когда элемент управления гиперссылкой помещен в ячейку таблицы и выбрана ячейка/строка, синий цвет выбора ячейки по умолчанию мешает светло-синему цвету текста гиперссылки, чтобы сделать текст…
Усечение текста в пределах диапазона внутри таблицы
У меня есть настройка таблицы для идеального усечения текста…. пока я не оберну текст в этой таблице в div. Смотрите этот JSFiddle как пример: http://jsfiddle.net/3DKMJ / Это работает для усечения…
WPF Datagrid Перенос Текста В Ячейку
У меня есть datagrid, который имеет пользовательский стиль, поэтому я могу повторно использовать этот формат во всем моем приложении. Он имеет пользовательский заголовок столбца, стиль строки и т….
Разбор объекта сохранения с пустым столбцом указателя
Можно ли сохранить объект синтаксического анализа с пустым столбцом (значением указателя)? В моем коде, если пользователь не вошел в систему, я хочу оставить userSubmitted пустым var sendReport =…
Запретить перенос в ячейке html. Как добавить с помощью свойств CSS перенос строки
При верстке у веб-мастеров периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справляется с этой задачей. Но иногда этот процесс приходится брать под контроль, особенно оформляя длинные слова и фразы, которые при неправильном переносе теряют смысл.
Свойство word-wrap
В HTML для разделения строк существует специальный тег
. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:
Проверка перенова слов
Л
о
г
о
т
и
п
Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.
Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.
Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:
p{
font: bold 30px Helvetica, sans-serif;
width: 25px;
word-wrap: break-all;
}
Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.
Свойство white-space
Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали «Ввод», браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.
В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши «Ввод». White-space со значением pre-line заставит браузер видеть в тексте Enter.
Проверка перенова слов
После
каждого
слова
я
нажимаю
клавишу
«Ввода».
Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
white-space: nowrap;
Text-overflow
Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:
- clip — просто обрезает текст;
- ellipsis — добавляет многоточие.
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
text-overflow: ellipsis;/*Добавляем многоточие*/
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden;/*Прячем все что выходит за рамки контейнера*/
Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.
Определяют как переносить длинные слова:
- только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» — проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то
или переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре. - после любого символа.
- согласно правилам русского языка с автоматическим применением дефиса.
overflow-wrap
word-wrap
word-break
line-break
hyphens
Html table запретить перенос в ячейке. Как добавить с помощью свойств CSS перенос строки
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент
, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работуНо в отличие от него не меняет шрифт на моноширинный.Краткая информация
Обозначения
Описание | Пример | |
---|---|---|
Указывает тип значения. | ||
A && B | Значения должны выводиться в указанном порядке. | && |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,]* |
+ | Повторять один или больше раз. | + |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | {1,4} |
# | Повторять один или больше раз через запятую. | # |
Значения
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление
переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.
Действие значений на текст представлено в табл. 1.
Пример
white-spaceПример
Великая теорема ФермаX n + Y n = Z n
где n — целое число > 2
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
Объект .style.whiteSpace
Примечание
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведёт себя как pre-line .
Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
В Firefox для значения normal , nowrap , и pre воспринимаются как pre-wrap .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) — первая черновая версия стандарта.
Определяют как переносить длинные слова:
- только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» — проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то
или переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре. - после любого символа.
- согласно правилам русского языка с автоматическим применением дефиса.
overflow-wrap
word-wrap
word-break
line-break
hyphens
уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеват
Html table запретить перенос в ячейке. Как добавить с помощью свойств CSS перенос строки. В чём состоит различие одно свойства от другого
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) | |
---|---|
Значения: | |
none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
hidden | Эквивалентно none . |
dotted | dotted |
dashed | dashed |
solid | solid |
double | double |
groove | groove |
ridge | ridge |
inset | inset |
outset | outset |
{1,4} | Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: |
initial | |
inherit |
Синтаксис
P {border-style: solid;} p {border-top-style: solid;}
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) | |
---|---|
Значения: | |
transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
цвет | Цвет рамок задается при помощи значений свойства .{border-color: #cacd58;} |
{1,4} | Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
P {border-color: #cacd58;}
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
Синтаксис
P {border-width: 2px;}
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:
Div { width: 100px; height: 100px; border: 2px solid grey; }
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .
Синтаксис
P {border-top: 2px solid grey;}
6. Внешний контур outline
Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.
Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.
Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .
Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.
Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }
6.1. Стиль внешнего контура outline-style
Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.
Синтаксис
P {outline-style: ridge;}
6.2. Цвет внешнего контура outline-color
Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.
Синтаксис
P { outline-style: ridge; outline-color: silver; }
6.3. Толщина внешнего контура outline-width
Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.
Синтаксис
P { outline-style: dotted; outline-width: 5px; }
Как предотвратить перенос текста в ячейке таблицы (html, css)
193 pkaeding [2008-11-19 00:39:00]
Кто-нибудь знает, как я могу предотвратить обтекание текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее данных под ним, но мне нужно, чтобы он отображался только на одной строке. Это нормально, если столбец очень широк.
HTML моей (упрощенной) таблицы выглядит так:
<table>
<thead>
<tr>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
</tr>
</tbody>
</table>
Сам заголовок завернут в div внутри тега th
по причинам, связанным с javascript на странице.
Таблица выводится с заголовками, обертывающими на несколько строк. Это происходит, только когда таблица достаточно широкая, поскольку браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.
Любые идеи?
html css
Как предотвратить перенос текста в ячейке таблицы
Кто-нибудь знает, как я могу предотвратить обтекание текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее данных под ним, но мне нужно, чтобы он отображался только на одной строке. Это нормально, если столбец очень широк.
HTML моей (упрощенной) таблицы выглядит так:
<table>
<thead>
<tr>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
</tr>
</tbody>
</table>
Сам заголовок завернут в div внутри тега th
по причинам, связанным с javascript на странице.
Таблица выводится с заголовками, обертывающими на несколько строк. Это происходит, только когда таблица достаточно широкая, поскольку браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.
Любые идеи?
таблицы — html перенос строки в таблице
Как предотвратить перенос текста в ячейке таблицы (3)
Кто-нибудь знает, как я могу предотвратить обтекание текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее данных под ним, но мне нужно, чтобы он отображался только на одной строке. Это нормально, если колонка очень широкая.
HTML моей (упрощенной) таблицы выглядит так:
<table>
<thead>
<tr>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
<th>
<div>Really long column heading</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
<td>
<div>data</div>
</td>
</tr>
</tbody>
</table>
Сам заголовок заключен в div внутри тега по причинам, связанным с javascript на странице.
Стол выходит с заголовками, обертывающими на несколько строк. Это происходит, только когда таблица достаточно широкая, поскольку браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.
Есть идеи?