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

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

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