【css】文字溢出，显示省略符号（...）/ 点点点

已于 2023-02-16 16:20:00 修改
阅读量4.2k 收藏 5
点赞数 1
分类专栏： css 文章标签： css 前端 css3
于 2020-08-02 10:50:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayyy/article/details/107734154
版权

前言

  • CSS3
  • 文字溢出，显示省略符号需要区分情况进行处理：可分为单行和多行的情况。

单行文字溢出

假设有这样的需求，如图：
在这里插入图片描述
那么可以用如下代码实现：

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
text-overflow:ellipsis;
border:1px solid #000000;
}
</style>

</head>

<body>

<p>div中完整的内容为 "文字溢出说三遍文字溢出说三遍文字溢出说三遍" ：</p>

<div class="test">文字溢出说三遍文字溢出说三遍文字溢出说三遍</div>

</body>
</html>

实现功能的核心代码为：

div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
text-overflow:ellipsis;
border:1px solid #000000;
}

说明:

  • white-space:nowrap; 含义为段落中的文本不进行换行
  • width:12em; 含义为div的宽度，目的是让文字显示不全（只能显示12个文字）
  • overflow:hidden; 含义为溢出的部分就不显示了
  • text-overflow:ellipsis;含义为显示省略符号来代表被修剪的文本。

这些组合到一起的含义为：当文字溢出时，显示省略号。

多行文字溢出

需求是防不胜防的，有可能会遇到这样的需求：文字只显示3行，溢出文字用省略号代表，如图：
在这里插入图片描述
那么可以用如下代码实现：

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}
</style>

</head>

<body>

<p>div中完整的内容为 "文字溢出说三遍文字溢出说三遍文字溢出说三遍" ：</p>

<div class="test">文字溢出说三遍文字溢出说三遍文字溢出说三遍</div>

</body>
</html>

实现功能的核心代码为：

div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
border:1px solid #000000;
}

说明:

  • width:5em; 规定div的宽度，目的是让文字显示行数超过3行（一行只能显示5个文字）
  • overflow:hidden; 含义为溢出的部分就不显示了
  • display: -webkit-box;含义为将对象作为弹性伸缩盒子模型显示 。但，这是chrome/safari（-webkit)浏览器的私有属性。出了chrome/safari浏览器，可能会不好用，可能会不好用，可能会不好用。
  • -webkit-box-orient: vertical;含义为垂直排列，方向是从上向下。
  • -webkit-line-clamp: 3;含义为显示3文字。相当于变相的设置高度。

这些组合到一起的含义为：文字只显示3行，溢出文字用省略号代表。

处理英文时，需要加点料

如果用上面的方法处理英文时，当遇到长单词时会失效，比如这种：

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}
</style>

</head>

<body>

<p>div中完整的内容为 "wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci" ：</p>

<div class="test">wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci</div>

</body>
</html>

在这里插入图片描述
这时需要添加上下面的代码：

word-wrap:break-word;
word-break:break-all;

说明:

  • word-wrap:break-word; 含义为不得以时，将长单词（也可以是URL）从内部进行换行
  • word-break:break-all; 含义为不讲条件的将长单词（也可以是URL）从内部进行换行

word-break:break-all;

div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break:break-all;
border:1px solid #000000;
}

在这里插入图片描述

word-wrap:break-word;

div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-wrap:break-word;
border:1px solid #000000;
}

在这里插入图片描述

使用clamp.js也可以处理文字溢出

略。

再说一下多行文字溢出

不加overflow: hidden;

在这里插入图片描述

指定高度

div.test
{
width:5em; 
height:10em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}

在这里插入图片描述

推荐的写法

div.test
{
width:5em; 
overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 3;
-moz-line-clamp: 3;
line-clamp: 3;
word-wrap:break-word;
word-break:break-all;
}

说明：

  • -moz代表firefox浏览器私有属性，-ms代表IE浏览器私有属性，-webkit代表chrome/safari私有属性，-o代表opera私有属性私有属
  • display: -webkit-box; display: -moz-box; display: box; 含义为支持firefox、chrome/safari、CSS3标准（万一浏览器都支持CSS3了呢，所以放上display: box;吧）。
  • line-clamp: 3;网上说这个属性CSS3中未定义。万一CSS4中有呢，还是先写上吧。

全文完。

参考

html在线运行https://www.runoob.com/runcode
https://www.w3school.com.cn/cssref/pr_text-overflow.asp
https://www.w3school.com.cn/cssref/pr_text_white-space.asp
https://www.cnblogs.com/linsimei/p/7273353.html
https://blog.csdn.net/u010651696/article/details/99291677
https://www.cnblogs.com/ldlx-mars/p/6972734.html
https://blog.csdn.net/chensonghuiyuan/article/details/49204747
https://blog.csdn.net/qq_26983555/article/details/80175428

sayyy
关注
专栏目录
学习css文本溢出显示省略号？
weixin_47450807的博客
04-24 1746
一、写在前面 今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
vue项目报错——This dependency was not found: * -!../../node_modules/@vue/cli-service/node_modules/css...
子时不睡的博客
10-09 4913
vue项目运行的时候报错 This dependency was not found: -!../…/node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref–6-oneOf-1-1!../…/node_modules/vue-loader-v16/dist/stylePostLoader.js!../…/node_modules/postcss-loader/src/index.js??ref–6-oneOf-1-2!
如何让溢出的文字省略号显示
kidding_z的博客
07-27 1120
如何让溢出的文字省略号显示 一、单行文本溢出显示省略号 1、单行文本溢出显示省略号–必须满足的三个条件。 <1>:先强制一行内显示文本。 <2>.超出的部分隐藏 <3>文字用省略号替代超出的部分 .box{ width: 150px; height: 100px; background-color: pink; font-size: 18px; co
【小技巧】CSS如何实现文字溢出显示省略号
最新发布
qq_65034569的博客
08-03 517
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
CSS，文本溢出显示省略号
沧海龙腾LV的博客
07-05 1万+
css文本溢出显示省略号
CSS系列之溢出的文字省略号显示
老__L的博客
02-06 4627
本文主要介绍CSS的text-overflow、white-space属性。溢出的文字省略号显示
CSS文本溢出显示省略号
weixin_45357661的博客
05-31 497
CSS溢出显示省略号
CSS文本设置超出2行显示省略号...
weixin_42464716的博客
01-09 5714
【代码】CSS文本设置超出2行显示省略号...
React多行文本溢出显示省略号...和箭头(纯CSS)
printf_what的博客
05-07 1305
纯CSS实现多行文本超出显示...以及展开和收起
css溢出显示省略号
h3040605762的博客
09-29 1080
>-webkit-line-clamp;用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。 >display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 >-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
[已解决]* !!vue-style-loader!css-loader?{“sourceMap“:true}!../../../node_modules/vue-loader/lib/style-c
qq_43055855的博客
10-16 6709
项目场景： 今天在写Vue-的style下的css样式的时候突然给我报这个鸟错误，找了半天也每看见我的css样式哪里写错了。 问题描述： ERROR Failed to compile with 1 errors 1:36:12 ├F10: PM┤ This dependency was not found: * !!vue-style-loader!css-loade
CSS 文字溢出省略号显示
那些年踩过的“坑”
11-10 1257
对于文本太长的情况，一般采取省略号来取代的方法
css文本溢出显示省略号
热门推荐
weixin_55472979的博客
08-19 3万+
css文本溢出显示省略号
溢出的文字省略号显示 css
weixin_49523082的博客
06-12 1063
1、单行文本溢出显示省略号–必须满足的三个条件。多行文本省略号显示大致和单行一致。一、单行文本溢出显示省略号。二、多行文本用省略号显示。
CSS实现文本溢出显示省略号
Mozifei73的博客
01-31 1585
文本溢出分为两种状态：单行超出显示省略号和多行超出显示省略号
css文字溢出显示省略号
Lccccb的博客
04-02 1734
/*chrome*/ { word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } /*ie ff chrome 但是...
css方式实现文本溢出显示省略号（单行和多行）
azkhx的博客
08-21 1189
文本溢出显示省略号
css 文字两列显示溢出隐藏变...
07-28
您好！对于CSS文字的两列显示，溢出隐藏并且在溢出时变为省略号，您可以使用以下的CSS属性和值来实现： ``` <style> .text-container { display: -webkit-box; -webkit-line-clamp: 1; /* 控制显示的行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } </style> <div class="text-container"> 这里是您的文本内容 </div> ``` 在上述示例中，我们使用了`-webkit-line-clamp`属性来指定显示的行数，然后通过设置`-webkit-box-orient`为`vertical`来让文本在垂直方向上显示。同时，我们还设置了`overflow: hidden`来隐藏溢出部分的文本，并使用`text-overflow: ellipsis`来添加省略号。 请注意，该方法在部分浏览器中可能需要使用浏览器私有前缀（如 `-webkit-`）来实现兼容性。 希望这能帮到您！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值