Nowrap css: white-space | htmlbook.ru

Leave a Comment / Css / By /

Содержание

white-space | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+9.5+1.0+3.0+1.0+3.5+1.0+1.0+

Краткая информация

Версии CSS

Описание

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line
В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
inherit
Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
ЗначениеПеренос текстаПробелы
normalПереноситсяНе учитываются
nowrapНе переноситсяНе учитываются
preНе переноситсяУчитываются
pre-lineПереносится
Не учитываются
pre-wrapПереноситсяУчитываются

Пример

HTML5CSS2. 1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
   .example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */ 
   } 
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Переносов в тексте нет */
   }
  </style>
 </head>
 <body> 
  
  <p>Пример</p>
  <p>
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   &lt;/body&gt;
   &lt;/html&gt;
  </p>
  
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства white-space

Объектная модель

[window.]document.getElementById(«elementID»).style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.

Почему этот CSS nowrap не работает?



Я пытаюсь удержать div bar_top_container от обертывания его содержимого независимо от того, насколько широка страница (т. е. оба выбора должны всегда появляться на одной и той же строке), это не работает, однако, когда ширина страницы слишком мала для того, чтобы они оба поместились на одной строке, как я могу это исправить?

Стили:

#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }

HTML:

<div>
 <div>
  <span>select1:  </span>
   <select><option value="asdf">asdf</option></select>
 </div>
 <div>
  <span>asdf: </span>
   <select><option value="blah">-- select action --</option></select>
 </div>
 <div></div>
</div>
html css
Поделиться Источник user318747     30 июня 2010 в 15:01

3 ответа

  • Почему этот вложенный код css не работает?

    Если у меня есть что-то вроде приведенного ниже кода, я бы ожидал, что моя ссылка будет красного цвета с большими шрифтами, однако она не работает. .footer { text-align: center; } .footer a { color: red; font-size: 32px; } Живой пример: http://jsfiddle.net/avUT4 / Я не понимаю. Я не очень хорошо…

  • CSS white-space nowrap IE терпит неудачу, но работает Firefox/Chrome

    Я никак не могу понять, в чем дело. В firefox/chrome я могу успешно использовать nowrap и overflow-x, но не в IE. Вот соответствующий блок кода для отключения обертывания… #code_block { background: #A9A9A9; padding: 3px 3px; white-space: nowrap; overflow-x: auto; font-family: Courier New, Lucida…


17

Вы можете иметь как block , так и inline свойств для элемента, если вы отображаете его как … inline-block !

Вот ваш код исправлен и работает:

  • span.bold являются label s

  • label связан со своим элементом form с помощью атрибутов for / id

  • bar_top_block is an id used twice. Should be a class

  • нет необходимости в float: left; , так как используется display: inline-block;

  • таким образом, нет необходимости в элементе очистки

  • элементы .bar_top_block также отображаются в строке, поэтому любой whitespace между ними отображается как whitespace. Чтобы избежать этого, я добавил комментарий, который избегает любого whitespace, хотя по-прежнему позволяет читать код HTML. Текст внутри — «no whitespace«, поэтому разработчик будет знать, что этот комментарий существует по какой-то причине и не должен быть удален 🙂

  • вы можете удалить width на body , это просто здесь для примера

  • вы можете играть со свойством overflow в контейнере

  • поскольку IE7 и ниже не понимают значения inline-block для блочных элементов, таких как div, вы должны использовать display: inline и присвоить элементу hasLayout , например, zoom: 1;

  • лучший способ нацелиться на IE7 и ниже и только на эти браузеры-с условным комментарием

  • Я добавил поддержку Fx2, но это просто по историческим причинам 🙂 .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Stack Overflow 3150509 - Felipe</title>
    <style type="text/css">
body {
    width: 300px;
}

#bar_top_container {
    overflow: auto;
    white-space: nowrap;
    border: 1px solid red;
}

.bar_top_block {
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #4965BB;
}

    </style>
    <!--[if lte IE 7]><style type="text/css">
.bar_top_block {
    display: inline;
    zoom: 1;
}
    </style> <![endif]-->
</head>
<body>
    <form method="post" action="#">
        <div>
            <label for="select1">Obviously I am a label: </label>
            <select><option value="asdf">asdf</option></select>
        </div><!-- no whitespace
        --><div>
            <label for="select2">I'm a label too and I need a for attribute: </label>
            <select><option value="blah">-- select action --</option></select>
        </div>
    </form>
</body>
</html>

Поделиться FelipeAls

    30 июня 2010 в 17:38


3

Перенос плавающих элементов как white-space: nowrap не работает для блочных элементов, а только для встроенных элементов и текста.

Поделиться jantimon     30 июня 2010 в 15:03


-1

Я предлагаю использовать допустимую форму использования:

<form>
  <label>select1: <select><option value="asdf">asdf</option></select></label>
  <label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>

Надеюсь, это поможет.

Поделиться Slavik Meltser     20 декабря 2012 в 15:53

  • html table пробел: nowrap не работает?

    У меня есть шаблон KnockoutJS, который создает input[type=text] и select рядом друг с другом без <br/> между ними. Однако это ставит разрыв линии между даже с white-space: nowrap; я в настоящее время тестирую в chrome. CSS : table. grid tbody tr td { padding: 0px 0px 0px 0px; margin: 0px 0px…

  • CSS переход с nowrap не является гладким

    Я пытаюсь разрешить CSS переход боковой панели, лучше всего описанный как это изображение: В то время как в одной строке {white-space: nowrap} работает великолепно, у меня возникают проблемы с обеспечением плавной анимации свернутой боковой панели, поскольку линии, кажется, ломаются….

Похожие вопросы:


CSS: IE: пробел: nowrap не работает

Т. е. не реагирует должным образом, чтобы без переноса атрибута CSS. Вопрос: Как сделать так, чтобы это работало в IE, чтобы оно отображалось как результат рендеринга Chrome?…


Почему этот css не работает на Firefox?

Я пытаюсь изменить стиль моего файла входного типа. Следующий CSS хорошо работает на Chrome и Opera, но не на Mozilla Firefox. HTML <input type=file class=custom-file-input /> CSS. ..


Firefox CSS проблема nowrap

Я пытаюсь создать горизонтальный (без разрывов строк) неупорядоченный список изображений на моем сайте, используя следующий код: <ul class=ImageSet> <li> <img src=blah> </li>…


Почему этот вложенный код css не работает?

Если у меня есть что-то вроде приведенного ниже кода, я бы ожидал, что моя ссылка будет красного цвета с большими шрифтами, однако она не работает. .footer { text-align: center; } .footer a { color:…


CSS white-space nowrap IE терпит неудачу, но работает Firefox/Chrome

Я никак не могу понять, в чем дело. В firefox/chrome я могу успешно использовать nowrap и overflow-x, но не в IE. Вот соответствующий блок кода для отключения обертывания… #code_block {…


html table пробел: nowrap не работает?

У меня есть шаблон KnockoutJS, который создает input[type=text] и select рядом друг с другом без <br/> между ними. Однако это ставит разрыв линии между даже с white-space: nowrap; я в…


CSS переход с nowrap не является гладким

Я пытаюсь разрешить CSS переход боковой панели, лучше всего описанный как это изображение: В то время как в одной строке {white-space: nowrap} работает великолепно, у меня возникают проблемы с…


CSS «Nowrap» не работает должным образом

В настоящее время я создаю шаблон email. Шаблон содержит USP-Е, которые выстроены рядом друг с другом. Это код, который я использую: <td width=100%> <span style=white-space: nowrap;>…


опция noWrap на tilelayer работает только частично

Чтобы предотвратить многократное дублирование карт мира на самом высоком уровне масштабирования, я использую опцию noWrap=true . Он работает хорошо, но только на левой стороне карты (серая область),…


Flexbox «nowrap» значение не работает

Это тот раздел моего кода, который не работает: . copyright { display: flex; flex-wrap: nowrap; /* This is not working */ color: red; } <link rel=stylesheet…

Поговорим о свойстве white-space | CSS-Tricks по-русски

Поговорим о свойстве white-space

В CSS есть такое полезное свойство, как white-space, которое остаётся без внимания у начинающих верстальщиков. Возможно, вы обходились без него довольно долго, но однажды узнав, что это такое, и как его использовать, вы поймёте как много вы потеряли.

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

Немного об HTML.

В HTML, всякий раз когда вы оставляете подряд несколько пробелов (табов или переводов строки), браузер, по умолчанию, будет выводить их как один единственный пробел. Такое поведение позволяет браузеру отделять и размещать элементы наиболее удобным для прочтения способом.

Если вы хотите чтобы все ваши пробелы и переводы строк отображались как в исходном HTML, то вам необходимо использовать тег pre, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.

Кроме того, можно воспользоваться неразрывным пробелом (&nbsp;), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях HTML был тег nobr для таких целей. Сейчас этот тег не рекомендуется к использованию.

Свойство white-space — это шаг к семантически чистому HTML. Вы можете настроить обработку браузером пробелов, используя CSS.

Определение и возможные значения.

Свойство white-space предназначено для определения поведения браузера при обработке множественных пробелов и переводов строк. Конечно, обрабатываемая часть документа ограничивается CSS-селектором.

Ниже перечислены допустимые значения свойства с описанием каждого из них:

white-space: normal

Значение по умолчанию. Если оно установлено явно, то результатом будет обычный вывод, без использования тега pre. Как и в случае с большинством CSS-свойств, существует только одна причина использовать это значение, когда вы установили это свойство где-либо выше по иерархии свойств или элементов, для того чтобы вернуть обычное поведение элемента.

Повторяющиеся пробелы и разрывы строк игнорируются, для того чтобы наиболее естественно отобразить текст.
white-space: nowrap

Это наиболее используемое значение свойства, поскольку оно делает поведение браузера точно таким же, как и в случае со значением normal, за исключением того, что подавляются разрывы строк, даже в тех случаях когда выводимый текст получается шире чем контейнер для вывода.

Элемент, для которого значение свойства установлено как nowrap, не позволяет тексту и другим inline-элементам переносится естественным образом на новую строку. Вместо этого он продолжает вывод за своими границами, до тех пор, пока текст не закончится, оставляя его на одной линии. Это значение не оказывает никакого эффекта на повторяющиеся пробелы между словами, они по-прежнему «схлопываются» в один, как обычно.

Повторяющиеся пробелы игнорируются, переводы строк не используются, даже если текст не помещается в строке.
white-space: pre

Это значение работает именно так, как ожидается: точно также, как и содержимое тега pre. Все пробелы и переводы строк выводятся точно также как и в исходном HTML. Если какая-нибудь строка шире, чем её родитель, то она не будет разрываться, а будет выводится как одна строка.

Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.
white-space: pre-line

Это свойство работает также как и normal, за исключением одного момента: переводы строк в исходной разметке являются значимыми. Таким образом, если в разметке между словами несколько пробелом, они будут проигнорированы как обычно, однако, если в разметке встречается перевод строки, при выводе, текст также будет перенесён на новую строку. Это значение не поддерживается в Internet Explorer до 7-ой версии, FireFox до 3-ей версии и Opera до версии 9.2.

Повторяющиеся пробелы игнорируются, переводы строк обрабатываюся.
white-space: pre-wrap

Это значение определяет такое же поведение как и значение pre, за тем исключением что строка переносится в соответствии с границами родительского элемента. Таким образом, текст будет переносится на новую строку, как это было бы при значении normal, а также будут считываться множественные пробелы и переводы строк исходного HTML. Это свойство не поддерживается в Internet Explorer до версии 7, а также FireFox до версии 3.

Обрабатываюся повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.
Варианты использования

Возможно, наиболее частый случай использования свойства white-space — это применение его к ссылке, которую вы не хотите переносить на новую строку.

На показанном скриншоте, ссылка «Read more »» кавычка (») перенеслась на новую строку, поскольку ей не хватило места. Этого можно избежать применив к ссылке значение nowrap. В этом случае ссылка будет перенесена на новую строку целиком, как неразрывный элемент. Обратите внимание, что свойство white-space было применено только к содержимому элемента. Поэтому ссылка и была перенесена на новую строку целиком. Текст внутри неё — неразрывен.

Заблуждения

У новичков вёрстки часто возникает недопонимание при использовании white-space: nowrap, в случае если они применяют его к inline-элементу и ожидают что он не будет переносится на новую строку. Стоит запомнить, что свойство применяется только к inline-элементам, которые находятся внутри элемента, к которому его применили, а также не оказывают никакого эффекта на блочные элементы и отступы между ними.

CSS white-space



Пример

Демонстрация различных значений свойства «white-space»:

p.a {
    white-space: nowrap;
}

p.b {
    white-space: normal;
}

p.c {
    white-space: pre;
}

Определение и использование

Свойство white-space указывает, как обрабатываются пробелы внутри элемента.

Значение по умолчанию:normal
Inherited:yes
Animatable:no. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object. style.whiteSpace=»nowrap»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
white-space1.08.03.53.09.5

Синтаксис CSS

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Значения свойств

ЗначениеОписание
normalПоследовательности пробелов будут свернуты в один пробел. Текст будет обернут при необходимости. Это значение по умолчанию
nowrapПоследовательности пробелов будут свернуты в один пробел. Текст никогда не будет переноситься на следующую строку. Текст продолжается в той же строке до тех пор, пока не будет обнаружен тег <br>
preПробелы сохраняются обозревателем. Текст будет только обернуть на разрывы строк. Действует как тег <PRE> в HTML
pre-lineПоследовательности пробелов будут свернуты в один пробел. Текст будет переноситься при необходимости, а на разрыв строки
pre-wrapПробелы сохраняются обозревателем. Текст будет переноситься при необходимости, а на разрыв строки
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: whiteSpace Свойство


css — Проблема с nowrap и max-width на абсолютно позиционированном элементе

Я не совсем уверен, какова ваша цель, потому что происходит много противоречивых вещей. Но я постараюсь и, надеюсь, вы сможете направить меня к желаемому решению:

https://jsfiddle. net/q7dyf6xh/

.wrapper {
    position: relative;
    display: run-in;
}

.info {
    position: absolute;
    max-width: 200px;
    white-space: pre-line;
}

Посмотрите на эту скрипку, поскольку вы можете видеть, что всплывающая подсказка теперь имеет максимальную ширину. Посмотрите, что я использую:

display: run-in;: отображает элемент в виде блока или встроенного в зависимости от контекста

white-space: pre-line;: последовательности пробелов будут свернуты в один пробел. Текст будет переноситься по мере необходимости и разрывов строк

Для лучшего понимания того, как все работает, смотрите здесь:

пробел : если вы используете nowrap , текст никогда не будет переноситься на следующая строка Текст продолжается в той же строке, пока не встретится тег!

Это сказало, что ваш max-width все еще работает, но с nowrap вы переполняете ваш элемент сейчас. Попробуйте дать своему элементу background-color, и вы увидите, что он на самом деле имеет такую ​​же ширину, как ваш max-width.

Посмотрите здесь, как он переполняет элемент: https://jsfiddle.net/fcnh2qeo/

И теперь ширина overflow: hidden будет отображаться только текст внутри вашего поля. Все остальное отрезано! Смотрите здесь: https://jsfiddle.net/0qn4wxkg/

Теперь я использовал display: run-in; и white-space: pre-line;, а также max-width: 200px, который, надеюсь, даст вам желаемое решение. Не зная контекст и код, который вы используете, это скорее предположение, чем ответ. Но, может быть, я могу помочь вам найти решение, которое соответствует вашим потребностям

Ура!

Свойство flex-wrap — многострочная расстановка блоков по главной оси

Свойство flex-wrap задает многострочную расстановку блоков по главной оси.

Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow.

Синтаксис

селектор { flex-wrap: nowrap | wrap | wrap-reverse; }

Значения

ЗначениеОписание
nowrapОднострочный режим — блоки выстраиваются в одну строку.
wrapБлоки выстраиваются в несколько строк, если не помещаются в одну.
wrap-reverse То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый).

Значение по умолчанию: nowrap.

Пример . Значение wrap

Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример .

Значение wrap-reverse

А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px, как им задано, а меньше:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:

<div> <div>1</div> <div>2</div> <div>3</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Смотрите также

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство justify-content,
    которое задает выравнивание по главной оси
  • свойство align-items,
    которое задает выравнивание по поперечной оси
  • свойство flex-wrap,
    которое многострочность flex блоков
  • свойство flex-flow,
    сокращение для flex-direction и flex-wrap
  • свойство order,
    которое задает порядок flex блоков
  • свойство align-self,
    которое задает выравнивание одного блока
  • свойство flex-basis,
    которое задает размер конкретного flex блока
  • свойство flex-grow,
    которое задает жадность flex блоков
  • свойство flex-shrink,
    которое задает сжимаемость flex блоков
  • свойство flex,
    сокращение для flex-grow, flex-shrink и flex-basis

Шпаргалка по Flexbox CSS | Типичный верстальщик

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start
Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
flex-end
Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
center
Строки располагаются по центру контейнера.
space-between
Строки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-around
Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
space-evenly
Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк.
stretch
Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
flex-end
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
center
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
space-between
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.
space-around
Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
space-evenly
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same.
stretch
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

html — Как исправить CSS «White-space: nowrap» в таблице?

html — Как исправить CSS «White-space: nowrap» в таблице? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 14к раз

На этот вопрос уже есть ответы здесь :

Закрыт 2 года назад.

Я хотел бы показать многоточие при переполнении текста, если описание слишком длинное для столбца. Однако я не уверен, почему мой код не работает. Я добавил! Это важно в случае, если есть какие-то внутренние файлы CSS, которые могли переопределять мой материал CSS. Прямо сейчас весь текст добавлен в одну строку кода в описании и имеет ширину 400 пикселей. [! [Колонка описания] [1]] [1]

  

    <таблица>
        
            
                
                    @Html.DisplayNameFor (модель => model.WorkOrderNumber)
               
            
        
        

            @foreach (элемент var в модели)
            {
                    // ЭТА СТРОКА НЕ РАБОТАЕТ
                    
                        @ Html.DisplayFor (modelItem => item.Description)
                    

так далее....

Создан 22 апр.

HJ1990HJ1990

31911 золотой знак22 серебряных знака1414 бронзовых знаков

0

Вам нужно обернуть текст внутри div в тег td и применить ниже css

 -е>. truncate, td> .truncate {
  ширина: авто;
  минимальная ширина: 0;
  максимальная ширина: 200 пикселей;
  дисплей: встроенный блок;
  переполнение: скрыто;
  переполнение текста: многоточие;
  белое пространство: nowrap;
}

вы можете изменить ширину по своему усмотрению

  стол, тд, тыс {
  граница: 1px solid #ddd;
  выравнивание текста: слева;
}

Таблица {
  граница-коллапс: коллапс;
  ширина: 100%;
}

th, td {
  отступ: 15 пикселей;
}

th> .truncate, td> .truncate {
  ширина: авто;
  минимальная ширина: 0;
  максимальная ширина: 200 пикселей;
  дисплей: встроенный блок;
  переполнение: скрыто;
  переполнение текста: многоточие;
  белое пространство: nowrap;
}  
  <таблица>
  
    
 Имя
 
    
 Адрес
 
    
 Сборы
 
  
  
     
 ipsum или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при разметке печатных, графических 
 
    
    

    Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при раскладке печатных, графических изображений. 
    

    
    
$100
 
  
  
    
Лойс
 
    
    

    фиктивный текст, используемый в макете печати, графики
    

    
    
$150
 
  
  
    
Джо
 
    
    

    Lipsum, как это иногда называют, это фиктивный текст, используемый в макете печати, графики
    

    
    
$300