Jak zawijać tekst w HTML?

185

Jak można zawijać tekst, aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaktóry przekracza szerokość div(powiedzmy 200px)?

Jestem otwarty na wszelkiego rodzaju rozwiązania, takie jak CSS, jQuery itp.

Satya Kalluri
źródło

Odpowiedzi:

240

Spróbuj tego:

div {
    width: 200px;
    word-wrap: break-word;
}
Alan Haggai Alavi
źródło
1
Czy się mylę lub zawijanie słów jest właściwością CSS3?
Gab Royer,
13
Jest to CSS3, ale działa w prawie wszystkich przeglądarkach głównego nurtu, w tym IE5.5 -> 9 - caniuse.com/#search=word-wrap
Jon Hadley
32
Podczas zawijania słów: słowo-łamanie; nie działa spróbuj przełamać słowa: przełamać wszystkie; / * ten jest zabójcą * /
redochka
@redochka Ale kiedy używasz word-break: break-all;wtedy w normalnym tekście, łamie słowa na środku, co jest brzydkie ... Czy nie możemy mieszać obu zachowań?
pawamoy
5
Ważne: tak jest word-break: break-alli nie word-wrap: break-all. Łatwy do popełnienia błąd
Simon_Weaver
58

Na bootstrap 3 upewnij się, że białe znaki nie są ustawione jako „nowrap”.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}
lukaserat
źródło
Wspaniały. Próbowałem użyć podziału słów: wszystko na korpusie panelu Bootstrap 3 na Twitterze, ale to nigdy nie zadziałało. Dodanie spacji: poprawka była normalna.
coolboyjules
5
Fajnie, ja white-space: normal;też potrzebowałem, zanim zadziałało.
radbyx,
56

Możesz użyć miękkiego łącznika w następujący sposób:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Będzie to wyglądać jak

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

jeśli pole zawierające nie jest wystarczająco duże lub

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Jeśli to jest.

Kim Stebel
źródło
18
Ale skąd będziesz wiedzieć, gdzie umieścić ­?
Kostas
Umieszczasz to w długich słowach, w których można je podzielić. Możesz nawet uzyskać te informacje automatycznie z odpowiedniego słownika.
Kim Stebel,
4
Ale co z bełkotem takim jak ten w przykładzie? To jest ok, aby włączyć aaaaaa...aaaaasię a­a­a­a­a­a­a...a­a­a­a?
Kostas
19
Dokładnie tego szukałem. I tak to jest zbyt nieśmiała, by zrobić cokolwiek, dopóki nie ma ;-)
w00t
3
działa to dobrze, jeśli słowo, które ma być zawinięte, to zbyt długa nazwa paczki lub podobny ciąg znaków z wieloma kropkami. możesz dodać & nieśmiały; po każdej kropce.
dokaspar
28
   div {
    // set a width
    word-wrap: break-word
}

The „ word-wraprozwiązanie” działa tylko w IE i przeglądarek wspiera CSS3.

Najlepszym rozwiązaniem dla różnych przeglądarek jest użycie języka po stronie serwera (php lub cokolwiek innego) do zlokalizowania długich ciągów znaków i umieszczenia w nich w regularnych odstępach czasu jednostki html. ​ Ta encja ładnie łamie długie słowa i działa na wszystkich przeglądarkach.

na przykład

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Orr Siloni
źródło
8
„umieść w nich w regularnych odstępach element html # 8203”, ale kiedy spróbujesz skopiować tekst i wkleić go gdzieś, na środku będzie losowy znak Unicode
użytkownik102008
9

Jedyny, który działa w IE, Firefox, Chrome, Safari i operze, jeśli w słowie nie ma spacji (takich jak długi adres URL), to:

div{
    width: 200px;  
    word-break: break-all;
}

Stwierdziłem, że jest to kuloodporne.

Kyle Dearle
źródło
9

To zadziałało dla mnie

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
Amol
źródło
6

Inną opcją jest również użycie:

div
{
   white-space: pre-line;
}

Spowoduje to ustawienie wszystkich elementów div we wszystkich przeglądarkach, które obsługują CSS1 (czyli prawie wszystkie popularne przeglądarki już w IE 8)

Andrew Marais
źródło
Jeśli masz <pre>element, który chcesz zawijać słowa, to działa word-breaklub word-wrapnie.
Pluto,
4

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Ponadczasowy
źródło
2

Dodaj ten CSS do akapitu.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 
Swapnil Godambe
źródło
2
Lubię text-overflow:ellipsistak jak następnego faceta, ale to nie jest poprawna odpowiedź na to pytanie. Chce zawinąć słowo, a nie obciąć przepełnienie.
Spudley
1

Przykład z trików CSS :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Więcej przykładów tutaj .

Juraj Guniš
źródło
0

Dla mnie rozwiązaniem po stronie serwera jest: $message = wordwrap($message, 50, "<br>", true);gdzie $messagejest zmienna łańcuchowa zawierająca słowo / znaki do rozbicia. 50 to maksymalna długość dowolnego segmentu i "<br>"tekst, który chcesz wstawić co (50) znaków.

deshbanks
źródło
4
To rozwiązanie nie będzie działać, jeśli 50-krotna szerokość znaku jest większa niż wymagany maksimum 200 pikseli. Wystarczy użyć funkcji powiększania w przeglądarce, a zobaczysz, że się
zepsuje
0

Spróbuj tego

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

właściwość text-overflow: ellipsis add ... i linia-zacisk pokazują liczbę linii.

Vladimir Salguero
źródło
0

W treści HTML spróbuj:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

W treści CSS spróbuj:

background-size: auto;

table-layout: fixed;
Wesson2
źródło
0

Spróbuj tego

div {display: inline;}
Michael Mulikita
źródło
0

Użyłem bootstrapu. Mój kod HTML wygląda jak ...

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}
Rahul Wasnik
źródło
Bootstrap ma text-justifyklasę, więc możesz go używać zamiast.wrap-text
barbsan
0

możesz użyć tego CSS

p {
  width: min-content;
  min-width: 100%;
}
Rashid Iqbal
źródło
0

próbować:

overflow-wrap: break-word;
Eden Sharvit
źródło
-2

Użyj word-wrap:break-wordatrybutu wraz z wymaganą szerokością. Głównie wstaw szerokość w pikselach, a nie w procentach.

width: 200px;
word-wrap: break-word;
aks
źródło
14
To jest identyczne z odpowiedzią powyżej. Po co się męczyć?
trgraglia,