本文作者:心月

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

心月IT博客 2019-09-30
css控制文本长度,超出部分显示省略号摘要:截取文本确实可以控制文本长度,但对于做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控制多行文本显示长度

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-09-30
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/340.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论