Szótörés - CSS-trükkök | CSS Almanach 2025

A word-breakCSS-ben lévő tulajdonság megváltoztatható, ha sortörésekre van szükség. Normál esetben a szöveg törése csak bizonyos helyeken fordulhat elő, például ha szóköz vagy kötőjel van.

Az alábbi példában word-breakehelyett megtehetjük a betűket:

p ( word-break: break-all; )

Ha ezután a szöveg szélességét egyre állítjuk, akkor ema szó minden betűre szakad:

Tekintse meg a Tollbeállítás szöveget függőlegesen, CSS-Tricks (@ css-tricks) szószegéssel a CodePen-en.

Ezt az értéket gyakran használják a felhasználók által létrehozott tartalommal rendelkező helyeken, így a hosszú karakterláncok nem kockáztatják az elrendezés megszakítását. Az egyik nagyon gyakori példa egy hosszú másolat és beillesztett URL. Ha az URL-nek nincs kötőjel, akkor az meghaladhatja a szülődobozt, rosszul vagy rosszabbul néz ki, elrendezési problémákat okozhat.

Lásd: A PenS Fixing links with word-break by CSS-Tricks (@ css-tricks) a CodePen oldalon.

Értékek

normal: használja az alapértelmezett szabályokat a szótörésre.
break-all: bármely szó / betű betörhet a következő sorra.
keep-all: a kínai, a japán és a koreai szöveg szavak nem szakadnak meg. Egyébként ez ugyanaz, mint normal.

Ezt a tulajdonságot gyakran használják a kötőjel tulajdonsággal együtt is, így töréskor egy kötőjel kerül beillesztésre, a könyvek szabványa szerint.

A teljes használat, a szükséges szállítói előtagokkal együtt:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Ezeknek a tulajdonságoknak az univerzális választón történő használata hasznos lehet, ha olyan webhelye van, amely sok felhasználó által létrehozott tartalommal rendelkezik. Bár méltányos figyelmeztetés, furcsa lehet a címek és az előre formázott szövegek (

Összefüggő

túlcsordulás-burkolás
kötőjelek
fehér űr
Hosszú szavak és URL-ek kezelése

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.