CSS设置div两行超出文本显示省略号

最新推荐文章于 2024-03-01 15:53:49 发布

溪雪

最新推荐文章于 2024-03-01 15:53:49 发布

阅读量330

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_42617840/article/details/130747988

版权

XX{

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

溪雪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS实现超出两行显示省略号

2301_79325339的博客

09-23

2388

在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。

div内容只显示两行，超出以省略号显示

开发路上的AZhe

04-21

947

.textoverFlow{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

参与评论您还未登录，请先登录后发表或查看评论

div中同时存在文本和数字超过两行出省略号

languai的博客

05-13

337

div中同时存在文本和数字超过两行出省略号 设置文本超过两行出省略号出现下面问题，未到指定宽度就换行 width: 255px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-cl...

DIV内只显示两行文字，超过的用省略号

HangMine的博客

12-10

1952

// 实现DIV内只显示两行文字，超过的文字用省略号代替 overflow: hidden; text-overflow: ellipsis; // 这里的display必须用-webkit-box display: -webkit-box; // -webkit-line-cl

CSS-实现div内文字显示两行，超出两行部分省略号显示

weixin_45558196的博客

06-21

2461

在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。 /* 用的是-webkit-私有属性。 */ div{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ...

div显示两行，超出内容以省略号代替

BearMX的专栏

03-01

513

<html> <head> <style type="text/css"> .show_two_line{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:...

CSS实现文本显示两行，超出部分显示省略号（常用到）

mengmeng1_的博客

02-03

2138

<div class="option-text"> <span v-text ="item.itemValue" class='ellipsis'></span> </div> <style> .ellipsis { word-break: break-all; text-overfl...

css 实现div内显示一行或两行，超出部分用省略号显示

荆轲刺秦王

12-27

1887

div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;...

CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法

小柠檬爱编程

07-05

1776

实现单行垂直居中，两行垂直居中，超过两行省略…显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2; .

CSS省略号text-overflow超出溢出显示省略号

09-25

当text-overflow属性设置为ellipsis时，超出部分的文本末尾就会显示省略号。案例中，通过为列表项（li）设置固定宽度，并使用overflow: hidden和text-overflow: ellipsis属性，可以在不换行的前提下，控制文本的...

CSS实现div内文字显示两行，超出两行部分省略号显示

roongyan92的博客

07-13

2126

在搭建前台文章列表中，需要实现div内文字显示两行，超出的则省略号显示。找了很多，都貌似只能一行显示。最后在百度知道找到答案。答案转自百度知道，题主的自答。用的是-webkit-私有属性。 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertic

div内容超出容器宽度，超出显示省略号且鼠标悬浮显示全部内容

热门推荐

树洞树洞-单纯记录

02-13

9万+

一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;

css div多余文字用省略号代替

adoreen的博客

10-09

1万+

css实现超出div长度文字自动隐藏或用省略号表示

chelflan's blog

07-23

3万+

在网页设计中，一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。看看下图中的实例。超出div长度用省略号表示上图显示，扩展阅读的文章标题，超出行宽用省略号表示。本文我们就来看看如何用css来实现的。css实现超出div长度用省略号表示源代码...

解决文本超出div外显示，文本多行或者单行进行省略

公众号安哥说前端

07-28

1955

解决文本超出div外显示，文本单行进行省略，文本多行进行省略

CSS 显示两行，超出部分显示省略号

08-05

### 回答1：可以使用 CSS 的 `text-overflow` 属性来实现超出部分显示省略号的...总结起来，要实现CSS显示两行文本，并在超出部分显示省略号，我们需要使用CSS的文本溢出属性，设置最大行数和溢出部分的省略号显示。