CSS筆記- 其他

J
J CSS

目錄

word-break

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */

normal: default

break-all: To prevent overflow

keep-all: 保留原來字樣

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

overflow-wrap

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

normal: 只在能斷句的時候(例如字元間的空白)才會換行

break-word: 依照空間調整，超過max-width下單字過長也會換行

anywhere: 在min-content情況下強制換行

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

writing-mode

決定text的排列方向，預設水平

writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

direction

決定text, table columns以及其他水平排列的方向

direction: ltr;
direction: rtl;

text-orientation

當writing-mode不是horizontal-tb時才起作用

text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

padding-block-start

功能和padding-top類似，但會依照writing-mode, direction, 還有 text-orientation的值而有所改變。

同樣的也有 padding-block-end, padding-inline-start, and padding-inline-end,分別對照到padding-bottom, padding-right, 和 padding-left.

white-space

決定空白字元斷行的方式

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

 

 連續空白字元換行
normal合併當空間不夠時換行
nowrap合併強制不換行
pre保留換行字元與<br>
pre-wrap保留換行字元,<br>,空間不夠時
pre-line合併換行字元,<br>,空間不夠時

text-overflow

文本溢出內容時的處理

必須要搭配overflow, white-space

overflow: hidden;
white-space: nowrap;

單一值：行末行為

兩個值：左側 右側行為

text-overflow: clip;
default:截斷
text-overflow: ellipsis ellipsis;
使用"…"省略
text-overflow: ellipsis " [..]";

 

-webkit-line-clamp

display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
text-overflow: ellipsis



Comments

Authors

Tags