Как обернуть или разбить длинный текст / слово в диапазоне фиксированной ширины?

106

Я хочу создать диапазон с фиксированной шириной, чтобы, когда я набираю что-либо в диапазоне, например <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>длинную строку без пробелов, слово (я) прерывается или переносится на следующую строку.

Любые идеи?

html css محمد ری
источник

Ответы:

195

Вы можете использовать свойство CSS word-wrap:break-word;, которое разбивает слова, если они слишком длинные для вашей ширины диапазона. 

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
Развернуть фрагмент

Максим Лорант
источник
1
Хорошо работает для управления метками asp.net. Спасибо!
etlds
42
Добавление white-space: normalпомогает переопределить внешний стиль, который может мешать :) .. inline-blockработает так же хорошо, какblock
Катя
А как насчет разрыва двух пролетов внутри блочного элемента?
Дэниел Спрингер
Для тех, у кого все еще возникают проблемы после использования этого ответа, обязательно укажите «ширину», иначе это может не сработать
Staccato
Он должен иметь ширину, чтобы знать, где сломать
DFSFOT
40

Попробуйте выполнить css с добавлением white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}
Жерар де Виссер
источник
5
Спасибо! Я не мог понять, почему мой текст никогда не переносился! белое пространство было причиной.
mdiehl13
1
Моя проблема также была исправлена ​​после того, как я поставил:white-space: normal
majorBummer
Вот справочная таблица на случай, если вам понадобится пробел и упаковка: css-tricks.com/almanac/properties/w/whitespace
Hritik
16

Как это

ДЕМО

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}
Фалгуни Панчал
источник
мой друг, я хочу, чтобы ширина диапазона: 50 пикселей; значения в моем диапазоне отображаются только в 50 пикселей, а другие значения переходят на следующую строку и отображаются в 50 пикселей !!!
محمد ری
1
@ mamal10 Проверьте решение Максима Лоранта.
Mr_Green
3

По умолчанию a spanявляется inlineэлементом ... так что это не поведение по умолчанию.

Вы можете заставить его spanвести себя таким образом, добавив display: block;в свой CSS.

span {
    display: block;
    width: 100px;
}

источник
1

Попробуй это

span {
    display: block;
    width: 150px;
}
Ишвара Редди
источник
0

Просто чтобы расширить практический объем вопроса и в качестве приложения к полученным ответам: иногда может оказаться необходимым указать немного больше селекторов.

Определив полный диапазон как display: inline-block, у вас могут возникнуть проблемы с отображением изображений.

Поэтому я предпочитаю определять диапазон так:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}
Леопольд
источник
0

В моем случае display: block нарушал дизайн, как и предполагалось.

max-widthСвойство просто спас меня.

и для укладки тоже можно использовать text-overflow: ellipsis.

мой код был

max-width: 255px
overflow:hidden
sh6210
источник