<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字溢出</title>
<style>
.single-text{
width:200px;
height:20px;
line-height:20px;
border:1px solid red;
/*打点展示*/
white-space:nowrap; /*溢出不要换行*/
overflow:hidden; /*溢出部分隐藏*/
text-overflow:ellipsis; /*溢出部分打点展示*/
}
.multiline-text{
width:100px;
height:40px;
line-height:20px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<!--
溢出容器，要打点展示。
1.单行文本。
超出部分打点处理。
2.多行文本。
超出部分做截断处理。溢出部分隐藏。
需要提前计算字数所占的长度。
-->
<!--单行文本-->
<div class="single-text">国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。</div>
<div class="multiline-text">国破山河在城春草木深感时花溅泪恨别鸟惊心。</div>
<!--多行文本-->
</body>
</html>
CSS渡一教程学习笔记(十三)--文字溢出处理，背景图片处理，企业开发经验
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
