Css запретить перенос слов: Как запретить перенос текста? | WebReference

Leave a Comment / Css / By /

div — Отключить автоматический перенос блока на новую строку. CSS

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

Подскажите каким образом можно это сделать.

http://jsfiddle.net/M8een/

#container {
  border: 2px solid red;
  width: 350px;
  height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
}
.image {
  float: left;
  margin: 2px;
}
<div>
  <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" />
  <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" />
  <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" />
  <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" />
</div>
  • div
  • css

2

Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо — текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.

inline-block — еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/

У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top;

Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение: http://jsfiddle.net/M8een/2/

1 

   #container {
      display: flex;
      border: 2px solid red;
      width: 350px;
      height: 120px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    . image {
      margin: 2px;
    }

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

hyphens — CSS | MDN

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

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang.

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

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

none

Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва.

Строки будут переноситься только по пробелам.

manual

Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже Предлагаемые возможности разрыва строки.

auto

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута

lang, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

U+2010 (HYPHEN)

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

U+00AD (SHY)

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте &shy; для вставки мягкого дефиса.

Примечание: Когда HTML-элемент <wbr> приводит к разрыву строки, дефис не добавляется.

hyphens = 
none    | (en-US)
manual  | (en-US)
auto

Указание переносов текста

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

HTML
 
 
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
</dl>
CSS
dd {
  width: 55px;
  border: 1px solid black;
 }
dd. none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
Результат

Характеристика СтатусКомментарий
CSS Text Module Level 3
Определение ‘hyphens’ в этой спецификации.		Кандидат в рекомендацииПервоначальное определение

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • content
  • overflow-wrap (formerly word-wrap)
  • word-break

Last modified: , by MDN contributors

css — Как отключить перенос слов в HTML?

спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 418 тысяч раз

594

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я чувствую себя глупо из-за того, что не могу понять это, но как отключить перенос слов? свойство css word-wrap может быть принудительно включено с помощью break-word , но не может быть принудительно выключено (можно оставить только с нормальным значением ).

Как заставить перенос слов отключить ?

  • HTML
  • CSS
  • перенос слов

1

Вам нужно использовать CSS пробел атрибут.

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

0

Добавлены специальные значения webkit, отсутствующие сверху

 white-space: -moz-pre-wrap; /* Fire Fox */
пробел: -o-pre-wrap; /* Опера */
пробел: предварительная обертка; /* Хром */
перенос слов: прерывание слова; /* IE */

Интересно, почему вы находите в качестве решения «белое пространство» с «nowrap» или «pre», это неправильное поведение: вы заставляете свой текст помещаться в одну строку! Текст должен разбивать строки, но не слова по умолчанию. Это вызвано некоторыми атрибутами css: переносом слов, переносом переполнения, разрывом слов и дефисами. Таким образом, вы можете иметь:

 word-break: break-all;
перенос слов: прерывание слова;
overflow-wrap: break-word;
-webkit-дефисы: авто;
-moz-дефис: авто;
-ms-дефисы: авто;
дефисы: авто;

Таким образом, решение состоит в том, чтобы удалить их или переопределить их с помощью «неустановленных» или «нормальных»:

 word-break: unset;
перенос слов: не установлен;
переполнение: не установлено;
-webkit-дефисы: не установлены;
-moz-дефис: не установлен;
-ms-дефис: не установлен;
дефисы: не установлены;
 ОБНОВЛЕНИЕ

: я также предоставляю доказательства с помощью JSfiddle: https://jsfiddle.net/azozp8rr/

2

пробел: nowrap; : текст никогда не прерывается, другие значения по умолчанию сохраняются.

пробел: предварительно; : никогда не будет разрывать текст, будет хранить несколько пробелов друг за другом как несколько пробелов, будет прерываться, если явно написано для разрыва (нажатие ввода в html и т. д.)

1

Это сработало для меня, чтобы предотвратить глупые перерывы в работе в текстовых областях Chrome

 word-break: keep-all;

Если вам нужно решение только для HTML, мы можем просто использовать тег pre . Он определяет «предварительно отформатированный текст», что означает, что он не форматирует перенос слов. Вот краткий пример для пояснения:

 раздел {
    ширина: 200 пикселей;
    высота: 200 пикселей;
    отступ: 20 пикселей;
    фон: #adf;
}
предварительно {
    ширина: 200 пикселей;
    высота: 200 пикселей;
    отступ: 20 пикселей;
    шрифт: наследовать;
    фон: #fda;
} 
 
Посмотрите на это, этот текст очень аккуратный, не так ли? Но это не совсем то, чего мы хотим, не так ли? Этого текста не должно быть здесь! Все должно быть там! Что мы можем сделать?


На помощь пришел тег pre! Ура! Тем не менее, мы заранее приносим свои извинения за возможные горизонтальные полосы прокрутки.  Если вам нужна поддержка, отправьте заявку в службу поддержки.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Остановить перенос слов, разделяющих слова

спросил

Изменено 4 месяца назад

Просмотрено 125 тысяч раз

68

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

 body {перенос слов: break-word;}

Я использовал этот код (выше), чтобы разместить текст в теле в его контейнере. Однако что мне не нравится в этом, так это то, что он разбивает слова.

Есть ли другой способ, при котором слова не будут разбиваться, а будет только разрыв строки после или перед словом?

РЕДАКТИРОВАТЬ: Это для использования в UIWebView .

  • css
  • uiwebview
  • перенос слов

3

использовать пробел : nowrap; . Если вы установили ширину элемента, для которого вы устанавливаете это, это должно работать.

обновление — отображаемые данные в Firefox

9

Пожалуйста, используйте nowrap и значение переноса мне не пришло. Nowrap решил проблему.

 пробел: nowrap;

1

Может быть немного поздно, но вы можете добавить этот css, чтобы остановить разрывы слов:

 . element {
    -webkit-дефисы: нет;
    -moz-дефисы: нет;
    -ms-дефисы: нет;
    дефисы: нет;
}

0

У меня была такая же проблема, я решил ее с помощью следующего css:

 .className {
  пробел: предварительная обертка;
  слово-разрыв:разрыв-слово;
}

2

Вы можете попробовать это… 

 корпус{
пробел: предварительно; /* CSS2 */
пробел: -moz-pre-wrap; /* Мозилла */
пробел: -hp-pre-wrap; /* принтеры HP */
пробел: -o-pre-wrap; /* Опера 7 */
пробел: -предварительная обертка; /* Опера 4-6 */
пробел: предварительная обертка; /* CSS 2.1 */
пробел: до строки; /* CSS 3 (и 2.1, кстати) */
перенос слов: прерывание слова; /* IE */
}

{word-wrap:;} является собственностью IE, а не частью css. обработка firefox правильная. К сожалению, FF не поддерживает мягкий дефис / . так что это не вариант. Возможно, вы могли бы вставить волос или тонкий пробел,  /  (проверьте меня на числовом объекте) и  /  соответственно.

Создание {переполнение: скрыто;} отключит переполнение, а {переполнение: авто;} заставит переполнение включить прокрутку.

4

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

Я обнаружил, что для этого мне нужен следующий CSS.

 таблица {
  макет таблицы: фиксированный;
}
тд {
  пробел: обернуть;
}

также проверьте, что больше ничего не меняется word-break to break-word вместо обычного .

0

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

 word-break: initial;

Я использую этот код для нашего веб-сайта, чтобы остановить разбиение слов:

 body {
    -ms-дефисы: нет;
    -webkit-дефисы: нет;
    дефисы: нет;
}

Использовать пробел : nowrap;

CSS white-space Свойство

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

Узнайте больше о примере с пробелами

Проблема разрыва слов в браузере Firefox.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *