目录
- 需求
- 代码
- 代码解释
需求
最近写一个项目，遇到了一个问题，就是希望实现下面这种文字效果：文字在一行排，超出的部分用省略号代替
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
/*下面这三行是实现省略号效果的核心代码*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">今天的天气非常棒，你要出去玩吗？</div>
</body>
</html>
代码解释
text-overflow: ellipsis;
- 作用： 这个属性用来设置当文本溢出一个块级元素的内容盒子时，如何显示。ellipsis 值表示用省略号（…）来表示文本的溢出部分。
- 效果： 如果 .box 类所指定的元素中的文本超出了元素的显示范围，那么超出的部分将被省略号替代。
white-space: nowrap;
- 作用： 这个属性控制元素内的空白字符的处理方式以及文本换行的行为。nowrap 值表示文本不会换行，而是在一行内连续显示。
- 效果： 即使.box 类的元素宽度不足以显示全部文本，文本也不会换行，而是尽可能地在一行内显示。
overflow: hidden;
- 作用： 这个属性用来设置当元素的内容溢出元素盒子时，如何处理溢出的内容。hidden 值表示溢出的内容将被裁剪，并且不显示滚动条。
- 效果： 如果 .box 类的元素中的文本超出了元素的显示范围，那么超出的部分将不会显示，也不会出现滚动条。
