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

104

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

Якісь ідеї?

html css

— محمد کثیری
джерело

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

1

Спробуйте це

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

— Есвара Редді
джерело

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

— ш6210
джерело