CSS控制文本超出打点显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS控制文本超出打点显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 单行文本过长打点

只有1行文本时，需要满足如下条件：

文本需要有宽度。当设置了宽度时，文本过长才会超出该宽度，所以文本的元素应该是块级元素（行内元素宽度、高度都会失效）。
不换行显示。单行文本无需换行。
超出部分隐藏。文本超出宽度的部分，需要隐藏显示。
文本超出打点。

示例代码：

<div>超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本</div>
<style>
    div {
        /* 设置宽度，如果文本内容长短不一，可以设置max-width最大宽度显示，小于最大宽度不会打点 */
        width: 200px;
        /* 文本不会换行显示 */
        white-space: nowrap;
        /* 超出盒子部分隐藏 */
        overflow: hidden;
        /* 文本超出的部分打点显示 */
        text-overflow: ellipsis;
    }
</style>

css 超出内容...显示,CSS,css,html,前端

2 多行文本打点显示

示例代码：

<div>超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本</div>
<style>
    div {
        /* 设置宽度原因：让文本宽度超过200px时换行显示 */
        width: 200px;
        /* 不同浏览器有不同的前缀，比如-moz-box */
        display: -webkit-box;
        /* 子元素的排列方式：垂直排列 */
        -webkit-box-orient: vertical;
        /* 设置3行文本之后打点显示 */
        -webkit-line-clamp: 3;
        /* 超出盒子部分隐藏显示 */
        overflow: hidden;
    }
</style>

css 超出内容...显示,CSS,css,html,前端

3 涉及的属性

3.1 white-space

white-space属性是用来设置如何处理元素中的空白，其属性值如下所示：

属性值	说明
`normal`	默认属性，多个空白连续符会被合并成1个显示
`nowrap`	多个连续空白符会合并成1个显示，文本不会换行，直到遇到`<br/>`为止
`pre`	多个连续空白会被保留，文本不会换行，直到遇到`<br/>`为止
`pre-wrap`	多个连续空白会被保留，会自动换行
`pre-line`	多个连续空白符会合并成1个显示，会自动换行

css 超出内容...显示,CSS,css,html,前端

3.2 text-overflow

text-overflow属性用来确定如何提示隐藏的溢出内容，其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串，其属性值如下：

属性值	说明
`clip`	默认值，在内容区的极限处截断文本
`ellipsis`	在内容区的极限处以省略号（…）来显示
`<string>`	使用给定的字符串来代替被修剪的文本（只在firefox浏览器有效）