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

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

какие идеи?

7 68
html css

7 ответов:

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

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

попробуйте следующий css:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}
14

такой

демо

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

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

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

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

попробуй такое

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

Я добавил в мой код. Аналогичный ответ как и выше.

   Dim lblSite As Label
   lblSite.Text = "lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk"
   lblSite.Attributes.Add("style", "display:inline-block;width:175px;word-wrap:break-word;white-space: normal")
-4