CSS控制文本超出打点显示

Posted 2022-11-25 橘猫吃不胖～

CSS控制文本超出打点显示

• 1 单行文本过长打点
• 2 多行文本打点显示
• 3 涉及的属性
• • 3.1 white-space
  • 3.2 text-overflow

1 单行文本过长打点

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

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

示例代码：

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

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>

3 涉及的属性

3.1 white-space

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

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

3.2 text-overflow

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

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

text-overflow属性并不会强制溢出，所以需要搭配额外的属性：overflow和white-space，例如：

white-space: nowrap;
overflow: hidden;