css中超出宽度如何显示省略号
发布时间：2023-05-14 14:58:34
在CSS中，可以使用text-overflow属性来设置文本超出宽度时如何显示省略号。该属性有三个值：
1. clip：文本超出宽度时直接截断，不显示省略号。
2. ellipsis：文本超出宽度时显示省略号。
3. string：文本超出宽度时显示指定的字符串。
下面通过实例来讲解text-overflow的用法。
例1：使用clip属性直接截断文本
<html>
<head>
<style type="text/css">
div {
width: 100px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: clip; /* 直接截断 */
}
</style>
</head>
<body>
<div>This is a long text that should be clipped.</div>
</body>
</html>
运行结果：文本超出100px的宽度时直接被截断，不显示省略号。
例2：使用ellipsis属性显示省略号
<html>
<head>
<style type="text/css">
div {
width: 100px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
</style>
</head>
<body>
<div>This is a long text that should be clipped.</div>
</body>
</html>
运行结果：文本超出100px的宽度时显示省略号。
例3：使用string属性自定义省略号
<html>
<head>
<style type="text/css">
div {
width: 100px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: "......"; /* 自定义省略号 */
}
</style>
</head>
<body>
<div>This is a long text that should be clipped.</div>
</body>
</html>
运行结果：文本超出100px的宽度时显示自定义省略号。需要注意的是，string属性的值需要加上双引号。