word-break қасиеті
word-break қасиеті
контейнердің еніне сыймайтын ұзын сөздің
әріптерін жаңа жолға көшіруге мүмкіндік береді.
Синтаксис
селектор {
word-break: break-all | keep-all | normal;
}
Мәндері
| Мәні | Сипаттама |
|---|---|
break-all |
Контейнерге сыймайтын ұзын сөздерді жаңа жолға көшіруге мәжбүрлейді. |
keep-all |
Иероглифтерді көшіру үшін. |
normal |
Әдепкі мінез-құлық: егер ұзын сөз контейнердің еніне сыймаса - ол оның шекарасынан шығып кетеді (бірақ жаңа жолдан басталады). |
Әдепкі мәні: normal.
Мысал . normal мәні
Бұл мысалда өте ұзын сөз контейнерге сыймайды және оның шекарасынан шығып кетеді (бірақ жаңа жолдан басталады):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
word-break: normal;
border: 1px solid red;
}
:
Мысал . break-all мәні
Ал енді сыймаған әріптер жай ғана келесі жолға көшіріледі:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
word-break: break-all;
border: 1px solid red;
}
:
Сондай-ақ қараңыз
-
overflow-wrapқасиеті,
ол да ұзын сөздің әріптерін жаңа жолға көшіруге мүмкіндік береді -
hyphensқасиеті,
ол сөздерді буындар бойынша көшіруді қосады -
overflowқасиеті,
ол блок шекарасынан шығып кеткен бөліктерді кесіп тастайды -
wbrтегі,
ол HTML құралдарымен жұмсақ көшірмелерді жүзеге асырады -
brтегі,
ол мәтінді жаңа жолға мәжбүрлеп көшіруге мүмкіндік береді