如何设置html显示文本限制长度值,css控制文本长度，超出部分显示省略号

摘要：截取文本确实可以控制文本长度，但对于做seo优化的人来说，截断文本会使蜘蛛爬取到的内容不完整，从而影响页面的评分和排名，但如果能不截取文本，又能让蜘蛛爬取到完整的内容那就完美了。

文本长度超出元素本身长度是实际应用长经常遇到的问题，如果不限制显示的文本内容，我们通常会截取文本的一部分内容，以保证页面整体布局的美观。这确实是一种方法，但对于做seo优化的人来说，截断文本会使蜘蛛爬取到的内容不完整，从而影响页面的评分和排名，但如果能不截取文本，又能让蜘蛛爬取到完整的内容那就完美了。

今天就来和大家分享下如何利用css在不截断文本内容的情况下控制文本显示长度。

1、不换行文本显示，超出部分显示省略号

文本所在的元素需在块元素，如果是行内元素，文本内容过长会把元素撑大html>

css控制文本显示长度，超出部分显示省略号

.parent1{ display: table;height:300px; width: 400px; background-color: #2169f3;margin: 150px auto;font-size: 21px;}

.parent1 .child{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 16px;}

.parent1 .child div{height: 42px;width: 400px;overflow: hidden;line-height: 42px;white-space:nowrap;text-overflow:ellipsis;}

在不截断文本内容的前提下，通过用css控制文本显示长度，超出元素长度部分文本用省略号显示

2、指定行数，内容超出行数，用省略号显示html>

css控制文本显示长度，超出部分显示省略号

.parent1{ display: table;height:300px; width: 400px; background-color: #2169f3;font-size: 21px;margin:150px auto;}

.parent1 .child{ display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 16px;overflow: hidden;}

.parent1 .child div{height: 84px;width: 400px;overflow: hidden;line-height: 42px;display: -webkit-box;-webkit-box-orient: vertical;/*2行*/-webkit-line-clamp: 2;overflow: hidden;}

多行文本内容在不截断文本内容的前提下，通过用css控制文本显示长度，超出元素长度部分文本用省略号显示，不过需要设置好行数和高度