Запретить перенос слов css: html — Как запретить разделение слов переносом в классе в CSS

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

Вопрос задан 9 лет 4 месяца назад

Изменён 2 года 9 месяцев назад

Просмотрен 109k раза

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

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

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

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

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

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

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

Почта

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

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

Почта

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

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

hyphens — CSS | MDN

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

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом

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

/* 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, используйте ­ для вставки мягкого дефиса.

Примечание: Когда 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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 13 авг. 2022 г. by MDN contributors.

пробелов | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 

  Куча слов, которые вы видите.
 

 раздел {
  /* Это значение по умолчанию, вам не нужно
     явно объявить его, если не переопределить
     другое объявление */
  пробел: обычный;
} 

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

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

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

 word-break: keep-all;
 

 дел {
    ширина: 200 пикселей;
    высота: 200 пикселей;
    отступ: 20 пикселей;
    фон: #adf;
}
предварительно {
    ширина: 200 пикселей;
    высота: 200 пикселей;
    отступ: 20 пикселей;
    шрифт: наследовать;
    фон: #fda;
} 

Посмотрите на это, этот текст очень аккуратный, не так ли? Но это не совсем то, чего мы хотим, не так ли? Этого текста не должно быть здесь! Все должно быть там! Что мы можем сделать?
 
На помощь пришел тег pre! Ура! Тем не менее, мы заранее приносим свои извинения за возможные горизонтальные полосы прокрутки.
No related posts.