發表更新網頁 / CSS2 分鐘讀完 (大約334個字)

使用 CSS 語法限制文本內容

目標 : 當文字超過限制時會自動顯示”…”的省略號。

使用「text-overflow: ellipsis;」隱藏內容。

HTML :

1
2
3
4
5
<body>
    <div class="box">
        <p>臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢宏志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
        </p>
    </div>

CSS :

1
2
3
4
5
6
.box {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 2px blueviolet solid;
}

在文字的區塊使用 text-overflow: ellipsis;

需一併設定 white-space: nowrap; 及 text-overflow: ellipsis; 才會有效果。

CSS :

1
2
3
4
5
6
7
8
9
10
11
12
.box {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 2px blueviolet solid;
}

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


text-overflow: clip;

裁剪文字內容。


word-wrap: break-word;

依據空白來換行。

word-break: keep-all;

依據空白來換行。

word-break: break-all;

到邊界立即斷行。


writing-mode: horizontal-tb;

水平顯示文本。

writing-mode: vertical-rl;

由右到左垂直顯示文本。

writing-mode: vertical-lr;

由左到右垂直顯示文本。

使用 CSS 語法限制文本內容

https://github.com/LeeU-1230/leeu-1230.github.io.git/2020/12/07/CSS/使用CSS限制內容/

作者

LeeU

發表於

2020-12-07

更新於

2024-04-04

許可協議

#
追蹤

分類

最新文章

彙整

標籤

CSS12
Google1
HTML3
Hexo1
JavaScript2
Javascript16
SSD1
markdown1
固態硬碟1
影片格式1

訂閱 Email

follow.it

×