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

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

Вопрос задан 9 лет назад

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

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

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

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

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;

Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками.

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 язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут

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

/* 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;
}

Результат

BCD tables only load in the browser

• content
• overflow-wrap (formerly word-wrap)
• word-break

Last modified: 13 авг. 2022 г.

css — Предотвратить разрыв строки между элементами html

спросил 1 год, 10 месяцев назад

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

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

0

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

Может ли кто-нибудь помочь, нужно избегать разрыва строки между элементами html; мой код:

 
0,80%
 /Карта 
 

текущий результат:

 0,80%
/Карта
 

ожидаемый:

 0,80%/карта
 

спасибо

• html
• css
• скрипты

1

Проблема в том, что абзацы

Вариант A: Замена абзаца встроенным элементом:

 0,80%/< a href="">Map 

Вариант Б. Сделать абзац внутри ссылки встроенным:

 а п {
  дисплей: встроенный;
} 

 
0,80%/Карта 

0

Если вы хотите сохранить тег

и обдумать ответ, используйте style="display:inline"

 
 <а href="t">
  
 80">0,80 %
 
 /Карта

 

или вы можете использовать тег вместо

,

 0,80%/Карта
 

Вы использовали тег абзаца

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

Итак, для этого есть простое решение. В теге абзаца используйте CSS для встраивания элемента, это объединит оба текста.

Код

Используйте его в своем коде здесь:

 
0,80%
 

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

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

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

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

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

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

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

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

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

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

html — Как предотвратить разрывы строк между элементом и его последующим элементом?

спросил 3 года 10 месяцев назад

Изменено 3 года, 10 месяцев назад

Просмотрено 367 раз

1

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

У меня есть списки определений с динамическим содержимым. Они отображаются друг под другом с помощью

 ДТ: после {
  содержание: ":";
  положение: родственник;
  отображение: встроенный блок;
} 

 <дл>
  
имя кошки
  
Кот

<дл>
  
кличка собаки
  
Лесси

<дл>
  
имя лошади
  
Ярость