1、新建一个html页面。
2、在html代码页面找到<body>标签，在<body>标签里创建一个<p>标签，然后输入显示的内容并添加一个class类为 class="cont"。
3、找到<title>标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。
4、为cont类添加内容显示为一行：white-space: nowrap，内容超出后显示为省略号：text-overflow: ellipsis。
5、保存好代码后使用浏览器查看效果。
01首先我们写一个div，div里就是一段文字。
02然后写一些css样式，关键部分是指定div的宽度，如图的样式代码
03刷新页面，可以看到我们的文字在超长的时候，显示在div的外面了。
04这时就要用到我们的overflow:hidden样式了。该样式就是为了避免超长时，显示内容溢出的，在样式里添加上这个。
05再次刷新页面，可以看到现在超出的文字已经被隐藏掉了。
.text-overflow {
display:block/*内联对象需加*/
width:31em
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/
}
扩展资料：上面是不带省略号，反之显示省略号
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0px
padding: 0px
}
#div1 {
width: 300px
height: 300px
background: red
}
.pText {
display: block
height: 30px
width: 250px
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
}
.aText {
width: 100px
white-space: nowrap
}
</style>
</head>
<body>
<div id="div1">
<span>
<a>空白会被浏览器保留。其行为方式类似 HTML 中的标签。</a>
</span>
</div>
</body>
</html>
多行文本可以使用如下样式:
.intwoline {
display: -webkit-box !important
overflow: hidden
text-overflow: ellipsis
word-break: break-all
-webkit-box-orient: vertical
-webkit-line-clamp: 3
}
