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

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

Регистрация через 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, используйте

­ для вставки мягкого дефиса.

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

Начальное значение	manual
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

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.

html — Предотвратить перенос элементов внутри div

спросил 6 лет, 8 месяцев назад

Изменено 6 лет, 8 месяцев назад

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

У меня есть простой список флажков внутри div. Я хотел придать div фиксированную ширину, но не хочу, чтобы метки этих флажков опускались на 1 строку вниз. Я также хочу сохранить полосы прокрутки, чтобы пользователь мог видеть скрытые части, если захочет. Некоторые говорят, что используйте

поплавок:левый; или переполнение: скрыто; , но это не работает. Я продолжаю получать список с метками, идущими по строке, а не скрытыми. Я думал переполнение: скрыто; исправит это, но вместо этого расширит ширину моего div, чтобы показать остальные метки.

 <дел>
Все

Сан-Франциско

Северная Каролина

Нью-Йорк

  #list{
  ширина: 80 пикселей;
  высота: 200 пикселей;
  переполнение-у: прокрутка;
  белое пространство: nowrap;
} 

 <дел>
  Все
  

  Сан-Франциско
  

  Северная Каролина
  

  Нью-Йорк
  

  Нью-Йорк
  

  Нью-Йорк
  

  Нью-Йорк
  

  Нью-Йорк
  

  Нью-Йорк
  

 

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

 пробел: nowrap;
Word-break: сохранить все;
 

 

    Все

    Сан-Франциско

    Северная Каролина

    Нью-Йорк


 

 .checkbox-wrapper {
    ширина: 80 пикселей;
    высота: 200 пикселей;
    переполнение: прокрутка;
    пробел: nowrap;
    Word-break: сохранить все;
}
 

 <ул>
Все
...

 

 ul { width: 80px; высота: 200 пикселей; переполнение: прокрутка; тип-стиля-списка: нет;}
li { пробел: nowrap; }
 

 div. testing {
    ширина: 100%;
    пробел: nowrap;
    переполнение-x: скрыто;
    переполнение текста: многоточие;
}
тело {
  отступ: 50px;
} 

 <дел>
 Все
 Сан-Франциско
 Северная Каролина
 Нью-Йорк
 

 

 <голова>
   
   <стиль>
     п {
       пробел: nowrap;
     }
   
 
 <тело>
    
Пример свойства пробела
 
   

     Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст.
   
 
 

 

 <голова>
   
   <стиль>
     дел {
       пробел: nowrap;
       граница: 1px сплошной зеленый;
     }
   
 
 <тело>
    
Пример свойства пробела
 
   <дел>
     Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст.  Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст.
   

  <голова> <стиль> охватывать {
 дисплей: блок;
 ширина: 250 пикселей;
 граница: 1px сплошной фиолетовый;
 переполнение: скрыто;
 пробел: nowrap;
 }   <тело>
Пример свойства пробела
 <диапазон> Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст. Lorem Ipsum — это просто фиктивный текст.