有没有办法在Label中的两行后面加上省略号？
在前端开发中，可以通过CSS样式来实现在Label中的两行后面加上省略号。具体做法是使用CSS的文本溢出截断属性（text-overflow: ellipsis）和多行文本显示属性（display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;）。
下面是一个示例代码：
HTML代码：
<label class="ellipsis-label">这是一段很长很长的文本，需要在两行后面加上省略号。</label>CSS代码：
.ellipsis-label {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}这段代码中，通过设置Label的样式为display: -webkit-box;，并且限制最多显示两行文本（-webkit-line-clamp: 2;），超出部分将隐藏并显示省略号（text-overflow: ellipsis）。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
5回答
webkit盒定向造型从造型中消失
css、angular、ionic-framework、sass、ellipsis
在我的角应用程序(我在4.3.1版上)中，我在多行之后添加了一个CSS省略号。
为此，我在Sass中使用以下css代码。
.ellipsis {
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
由于某些原因，框向行被transpile从样式中移除，导致省略号无法工作。这似乎发生在棱角和离子的应用程序。
浏览 14提问于2017-09-11得票数 39
回答已采纳
2回答
以下css中的设计在Mozilla firefox中未按预期显示
css、twitter-bootstrap、web-testing
我有一个CSS，如下所示。
.controlledline4 {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
但是上面的CSS设计在Chrome中显示得很完美，但在Mozilla Firefox中却看不清楚。注意:上面的代码是为了隐藏冗长的文本，而只显示文本开头的几行。
浏览 1提问于2018-12-28得票数 0
3回答
div内部的文本需要被分割并且..。如果文本很长，就显示出来
html、css
我有一个要求，我需要在div中显示文本。很少有这样的条件，例如，如果文本长度太长，我需要拆分文本并将其显示到第二行。
e.g:
Input:
Hello Every Body this is long text
Output:
Hello Every Body
This is...
我试着用下面的css来实现这个解决方案，
.div{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-ori
浏览 0提问于2017-02-22得票数 0
1回答
文本溢出:省略号属性不适用于IE11浏览器
html、css
以下css在Chrome浏览器中工作并显示省略号(以红色突出显示)，结果如下所述： Chrome： position: relative;
display: -webkit-box;
max-height: 136px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; 结果： ? 但在IE 11的情况下，它不显示省略号： ? ? 有人能帮我解决这个问题吗？
浏览 36提问于2019-05-15得票数 1
4回答
CSS文本溢出省略号显示不正确
html、css、web
我有一个<p>标签来显示一些信息，但是它应该限制在2行，如果文本更大，它应该显示“.”最后。我尝试了许多解决方案，但我无法确切地得到我正在寻找的东西。我已经尝试了下面的css。
.mw {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 20px;
max-height: 40px;
width:
浏览 7提问于2017-07-06得票数 1
回答已采纳
2回答
如何限制字符的数量并将..。在最后
javascript、html、css、angular、twitter-bootstrap
我有一页显示我的产品，但是这个产品有一个很长的描述。
我希望当它减少x字数时，它会在css中剪切并显示.在最后
<dd class="hiddendescricao deskonly" id="descricao"></dd>
<a (click)="rollDown(sectionRelated)" class="text-secondary">Ver mais</a>
.hiddendescricao {
display: -webkit-box;
text-overflow:
浏览 7提问于2022-10-25得票数 1
回答已采纳
3回答
文本溢出省略不适用于Firefox和IE浏览器中的多行
html、css
我试图在几行代码之后实现Ellipsis。我已经实现了这一点
它在Chrome上工作，但在Firefox，IE中不起作用。
css
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
浏览 2提问于2016-11-17得票数 4
1回答
我如何才能在此区域显示2行动态文本，并以3个点结尾，然后显示旁边的“阅读更多”链接
html、css、angular、typescript
我已经尝试给css(省略号)属性。我需要显示两行(如果我可以设置最大长度字符也可以)。我已经在angular中使用了'limit‘属性来裁剪文本，但是在这个InnerHTML内容中没有发生。请查看我的HTML：
<div>
<p class='ellipsis' [innerHTML]="news.newsText"></p>
<a href="javascript: void(0)" (click)="readmoreFunc(news)">Read more<
浏览 3提问于2020-11-17得票数 0
我正在尝试一个div元素，当我在其中插入一个文本时，div元素的CSS样式可以将一个长文本分成多行，而且当它达到div高度时，最后一行的末尾会出现省略号(...)
我的div有一个以像素为单位的静态高度和宽度。我的问题是，我尝试过使用"overflow-wrap:break-word"，省略号不起作用，但是没有它，省略号可以工作，但是div只有一行，我想要多行，而不是一行。
<div style="overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;overflow-wrap: break-word
浏览 0提问于2020-05-19得票数 0
3回答
如何在反应js中用css显示2行带有省略号的行？
javascript、html、css、reactjs、sass
我想显示两行文章描述与省略在末尾。实际上，我从youtube css样式中复制了所需的样式。Youtube样式适用于所有浏览器，如safari和iOS设备浏览器。
我使用内联样式来响应js，如下所示：
<span
style={{
lineHeight: "2rem",
fontWeight: "500",
浏览 9提问于2022-07-15得票数 0
回答已采纳
3回答
如何在bootstrap 4中将长文本截断为1行
jquery、html、css、datatable、bootstrap-4
我想在bootstrap 4中将一些长文本截断成一行，我在这里读到了许多解决方案，如Link 1，Link 2，Link 3，但它们都没有帮助。 我得到的文本是： ? 这是我想要的样子： ? 但这发生在如下所示的代码中，表行稍微向外突出，文本不在一行中。 ? 下面是我的代码： <div class="row">
<div class="font-14">
<table id="userLogTable" class="
浏览 36提问于2019-12-26得票数 0
1回答
如何使用省略号文本溢出来适应卡片的高度
html、css、frontend
我试图使我的文本适合这张卡片的高度，并使用省略号隐藏溢出，正如您可以看到的，如果我使用空格:没有换行，它可以工作，但使我的文本块一行。如果我使用"normal“，我会得到我的代码块，但是省略号消失了……我如何才能做到这一点？ <vx-card >
<template slot="actions">
<span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}}
</span>
&l
浏览 11提问于2020-07-09得票数 0
回答已采纳
3回答
带有省略号和现在的空白的文本缠绕
html、css
我想用ellipsis切断一些长的文本。
但是，在我当前的实现中，它不包括会导致它超出div的额外单词，也不显示ellipsis来指示文本被切断。
我做错什么了？
<div class="testWrap">This is some very long text that I want to cut off </div>
.testWrap{
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px
浏览 3提问于2013-08-29得票数 8
回答已采纳
2回答
如何制作带有多个段落的div省略号？
html、css、ellipsis
<div>
<p>This is a sample text.</p>
<p>This is a 2nd sample text. existing inside a paragraph. I want to make this ellipsis to avoid overflow text.</p>
<p>This is a last paragraph which is not going to display as 3 lines are already displayed</p>
</div
浏览 4提问于2020-06-11得票数 6
回答已采纳
2回答
如何在第二行的div中溢出一个绝对定位的跨度？
html、css
我希望这个描述文本在第二行有text-overflow: ellipsis。但是我的代码似乎不能工作。
<div class="container">
<span
>Test test test testTest test test testTest test test testTest test test
testTest test test testTest test test testTest test test test</span
>
</div>
和css部分(注意:在这种情况下需要一个相对定位
浏览 0提问于2021-09-10得票数 1
3回答
css -多行线夹(省略号)不起作用
ellipsis、linefeed
.ellipsis-2 {
$lines: 2;
$line-multiple: 1.3;
$font-size: 1em;
display: block;
display: -webkit-box;
max-height: $font-size * $line-multiple * $lines;
line-height: $font-size * $line-multiple;
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
-webkit-line-clam
浏览 2提问于2016-08-17得票数 9
5回答
为什么webkit行夹紧在firefox中不起作用？
html、css、firefox
我使用这个webkit线夹，它在Chrome中工作，但在Firefox中不起作用。以下是守则：
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* number of lines to show */
line-height: X; /* fallback */
max-height: X * 4; /* fallback */
}
我应该如何让它在火狐上工作呢？
浏览 9提问于2013-12-15得票数 25
回答已采纳
4回答
-webkit-line-clamp: 2在ionic 4中不工作
css、ionic4
我正在使用-webkit-line-clamp: 2来限制在ionic4应用程序中出现的行数，但它在初始加载时并不像预期的那样出现。相反，当我在chrome中使用inspect编辑css时，它就出现了。有什么解决方法可以解决这个问题吗？使用的css是：
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
浏览 0提问于2019-10-20得票数 3
21回答
第二行的css省略号
html、css
CSS text-overflow: ellipsis在第二行，这可能吗？我在网上找不到它。
示例：
我想要的是这样：
I hope someone could help me. I need
an ellipsis on the second line of...
但实际情况是这样的：
I hope someone could help me. I ...
浏览 8提问于2011-03-11得票数 284
回答已采纳
1回答
水平和垂直之间的不同包装文本
javascript、css、reactjs、text、material-ui
我面临着一个很明显的问题。我想已经有1000多人问过这个问题，但我在谷歌上没有找到答案：
我想把我的短信包装在我的卡片里，这就是我现在得到的：
我的CSS当前是：
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
所以我想要的是：
当文本中有一个断行时，我的文本将转到一个新行: ok
当出现垂直溢出时，我的文本有三点省略:好的
当出现水平溢出时，我的文本将行:不确定(见图像中的第2行)。
我该怎么做？
浏览 3提问于2020-07-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
