css多写作本外溢时出現省略号的示例

日期:2021-03-01 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

多写作本外溢时出現省略号

本文强烈推荐2种方式。

1. css

tip:只适配chrome核心的访问器。ff不适用。

.box {
    overflow: hidden; /* 外溢时无法显示外溢的內容 */
    text-overflow: ellipsis; /* 产生外溢时应用省略号替代 */
    display: -webkit-box; /* chrome访问器的独享特性。显示信息为box。 */
    -webkit-box-orient: vertical; /* 竖直排序元素 */
    -webkit-line-clamp: 2; /* 显示信息是多少行 */
}

延展

word-wrap

重要字 叙述 默认设置值 值 word-wrap 要求单词换行的标准 normal, 在单词断字点处换行。 break-word,在单词内换行。 overflow-wrap,在css3时由word-wrap改成overflow-wrap      

text-overflow

重要字 叙述 默认设置值 值 test-overflow 超过盒子的文字怎样显示信息   clip, 修剪文字。 ellipsis, 显示信息省略号。 string, 显示信息特定的文字。

white-space

重要字 叙述 默认设置值 值 white-space 对待空白的方式和是不是换行 normal,空白会被访问器忽视。 pre, 保存空白。nowrap, 文字不换行。pre-wrap, 保存空白,一切正常换行。pre-line,合拼空白,保存换行。

box-orient

这个特性都还没被访问器适用。必须应用各有访问器的独享特性。

重要字 叙述 默认设置值 值 box-orient 子元素怎样排列 inline-axis,子元素沿着内联座标轴(投射到横向)。 horizontal, 特定子元素在1个水平网上从左到右排序。vertical, 从顶部向底部竖直排序子元素。block-axis, 子元素沿着块座标轴(投射到竖直)。inherit,承继父元素。

line-clamp

仅有chrome核心的访问器适用自身的独享特性。

显示信息是多少行块级元素。

2. js

应用js操纵外溢文字怎样显示信息的方式有许多。这里强烈推荐1个脚本制作文档:ellipsis.js

ellipsis.js

名字 连接 ellipsis 连接 https://www.jsdelivr.com/package/npm/ellipsis.js ellipsis https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js ellipsis git https://github.com/glinford/ellipsis.js

应用方式。

1、 引进脚本制作文档

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2、 应用

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

延展

它也有1些配备项。若配不上置则应用默认设置值。

{
    ellipsis: '...', // 默认设置显示信息的取代文字
    debounce: 0, // 延迟时间多长期后实行
    responsive: true, // 是不是有对话框尺寸更改时实行
    className: '.clamp', // 默认设置实际操作具备这个类的元素。
    lines: 2, // 默认设置只出現2行元素。
    portrait: null, // 默认设置不更改,假如你要想在竖屏方式下有不一样的行数,
    break_word: true // 默认设置断开单词。
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:根据 CSS 动漫的 SVG 按钮案例编码 返回下一篇:没有了