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

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
источник