Rumah > hujung hadapan web > html tutorial > CSS 设置文本省略 ellipsis (…)_html/css_WEB-ITnose

CSS 设置文本省略 ellipsis (…)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:20:23
asal
1337 orang telah melayarinya

自用笔记:本文属于自用笔记,不做详解,仅供参考。

在 CSS 中应用 ellipsis 属性,可显示省略符号(…)来代表被修剪的文本。

See the Pen text-overflow: ellipsisby MOxFIVE ( @MOxFIVE) on CodePen.

单行省略

样式代码

<span>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</span>
Salin selepas log masuk

span {    display: block;    width: 14em;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}
Salin selepas log masuk

代码简析

text-overflow: ellipsis;// [必需], 文本溢出时显示省略号(…)display: block;// [可选], `ellipsis` 只应用于 `block containers`(块级容器),// 如果所在 HTML 标签非块级,那需要设置 `display` 属性white-space: nowrap;// [必需], 将文本限制在一行内overflow: hidden;// [必需], 隐藏溢出的内容// 可按需要仅设置 `overflow-y` 或 `overflow-x`width: 14em;// [可选], 限制容器宽度// 可使用 `max-width`
Salin selepas log masuk

多行省略

在指定行数后,才使用省略号代替溢出文本,这可以借助 -webkit-line-clamp属性实现

  • -webkit- 内核属性,不支持 IE 和 Firefox 浏览器 查看兼容性

样式代码

<p>CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.</p>
Salin selepas log masuk

p {    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    width: 15em;    line-height: 1.5;    text-overflow: ellipsis;    overflow : hidden;}
Salin selepas log masuk

代码简析

// 必需的属性display: -webkit-box; // 将元素设为弹性盒模型-webkit-line-clamp: 2; // 文本最大行数-webkit-box-orient: vertical; // 模型内元素垂直排列text-overflow: ellipsis;overflow : hidden;// 可选的样式width: 15em; // 限制容器宽度line-height: 1.5; // 建议增大行高,避免文字被腰斩
Salin selepas log masuk

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan