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

心月IT博客 09-30

默认

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css控制文本显示长度，超出部分显示省略号</title>
</head>
<style>

.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;}
</style>
<body>
    <div class="parent1">
        <div class="child">
        	<div>在不截断文本内容的前提下，通过用css控制文本显示长度，超出元素长度部分文本用省略号显示</div>
        </div>
    </div>
</body>
</html>

css控制文本显示长度

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css控制文本显示长度，超出部分显示省略号</title>
</head>
<style>

.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;}
</style>
<body>
	<div class="parent1">
        <div class="child">
        	<div>多行文本内容在不截断文本内容的前提下，通过用css控制文本显示长度，超出元素长度部分文本用省略号显示，不过需要设置好行数和高度</div>
        </div>
    </div>
</body>
</html>

css控制多行文本显示长度