css3 文本超出后出现省略号

时间：2023-03-08 22:25:19

clip：当内联内容溢出块容器时，将溢出部分裁切掉。

ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。

当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符

要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。
我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上
<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title>

<style>

.test li{margin-top:10px;}

.test .clip p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:clip;}

.test .ellipsis p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}

</style>

</head>

<body>

<ul class="test">

    <li class="clip">

        <strong>clip: 直接将溢出的文字裁剪</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

    <li class="ellipsis">

        <strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

</ul>

</body>

</html>
方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

原文出处：http://gucong3000.github.io/css-book/properties/user-interface/text-overflow.htm

相关文章