Як я можу загортати або розбивати довгий текст / слово фіксованою шириною?


104

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

Якісь ідеї?

Відповіді:


192

Ви можете використовувати властивість CSS word-wrap:break-word;, яка порушить слова, якщо вони занадто довгі для вашої ширини прольоту.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>


1
Добре працює для контролю етикетки asp.net. Дякую!
etlds

41
Додавання 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
Майор

Ось довідкова таблиця у випадку, якщо вам знадобиться пробіл та обгортання: css-tricks.com/almanac/properties/w/whitespace
Hritik

16

Подобається це

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

мій друг, якого я хочу, коли розміщується ширина прольоту: 50px; значення в моєму проміжку показують лише в 50px, а інші значення переходять до наступного рядка та показуються у 50px !!!
محمد کثیری

1
@ mamal10 Перевірте рішення Maxime Lorant.
Mr_Green

3

За замовчуванням a span- цеinline елемент ... тож це не поведінка за замовчуванням.

Ви можете змусити spanсебе так поводитись, додавши display: block;у свій CSS.

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


0

Просто, щоб розширити практичну сферу питання і як додаток до наведених відповідей: Іноді може бути необхідним трохи більше вказати селектори.

Визначивши повний проміжок як дисплей: вбудований блок , можливо, буде важко відображати зображення.

Тому я вважаю за краще визначити проміжок таким чином:

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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.