Jak zawijać lub łamać długi tekst / słowo o stałej szerokości?

104

Chcę utworzyć rozpiętość o stałej szerokości, która po wpisaniu czegoś w rozpiętości, np. <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>Długiego ciągu tekstu bez odstępów, łamie się lub zawija do następnego wiersza.

Jakieś pomysły?

html css محمد کثیری
źródło

Odpowiedzi:

192

Możesz użyć właściwości CSS word-wrap:break-word;, która złamie słowa, jeśli są za długie w stosunku do szerokości rozpiętości. 

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

Maxime Lorant
źródło
1
Działa dobrze w przypadku formantu etykiet asp.net. Dzięki!
etlds
41
Dodanie white-space: normalpomaga zastąpić zewnętrzną stylizację, która może przeszkadzać :) .. inline-blockdziała równieżblock
Katia
A co z przerwaniem dwóch przęseł znajdujących się wewnątrz elementu blokowego?
Daniel Springer
Dla tych, którzy nadal mają problemy po skorzystaniu z tej odpowiedzi, określ „szerokość”, w przeciwnym razie może nie działać
Staccato
Musi mieć szerokość, aby wiedzieć, gdzie się złamać
DFSFOT
40

Spróbuj wykonać następujący css z dodatkiem white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}
Gerard de Visser
źródło
5
Dzięki! Nie mogłem zrozumieć, dlaczego mój tekst nigdy się nie zawija! powodem była biała przestrzeń.
mdiehl13
1
Mój problem został również naprawiony, gdy umieściłem:white-space: normal
majorBummer
Oto tabela referencyjna na wypadek, gdybyś potrzebował spacji i zawijania: css-tricks.com/almanac/properties/w/whitespace
Hritik
16

Lubię to

PRÓBNY

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}
Falguni Panchal
źródło
mój przyjaciel, którego chcę po umieszczeniu rozpiętości: 50px; wartości w moim zakresie są wyświetlane tylko w 50 pikselach, a inne wartości przechodzą do następnego wiersza i są wyświetlane w 50 pikselach !!!
محمد کثیری
1
@ mamal10 Sprawdź rozwiązanie Maxime Lorant.
Mr_Green
3

Domyślnie a spanjest inlineelementem ... więc nie jest to zachowanie domyślne.

Możesz tak się spanzachowywać, dodając display: block;do swojego CSS.

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

źródło
1

Spróbuj tego

span {
    display: block;
    width: 150px;
}
Eswara Reddy
źródło
0

Żeby poszerzyć praktyczny zakres pytania i jako załącznik do udzielonych odpowiedzi: Czasami może się okazać, że trzeba nieco bardziej sprecyzować selektory.

Definiując pełny zakres jako display: inline-block, możesz mieć problemy z wyświetlaniem obrazów.

Dlatego wolę zdefiniować rozpiętość w ten sposób:

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;
}
lampart
źródło
0

W moim przypadku display: block zepsuł projekt zgodnie z zamierzeniami.

max-widthNieruchomość właśnie mnie uratował.

a do stylizacji możesz również użyć text-overflow: ellipsis.

mój kod był

max-width: 255px
overflow:hidden
sh6210
źródło