在 div 中只包装两行内的文本

我希望在特定宽度的 div 中只包装两行内的文本。如果文本超过两行的长度，那么我想显示省略号。 有没有一种方法可以使用 CSS 实现这一点？

例如:。

Sample text showing wrapping
of text in only two line...
377897 次浏览
小开
最佳答案

如果设置元素的 line-height和 height，并设置 overflow:hidden;:

#someDiv {
line-height: 1.5em;
height: 3em;       /* height is 2x line-height, so two lines will display */
overflow: hidden;  /* prevents extra lines from being visible */
}

- 小提琴演示

或者，您可以使用 CSS text-overflow和 white-space属性来添加省略号，但是这似乎只适用于单行。

#someDiv {
line-height: 1.5em;
height: 3em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}

还有一个小样:

- 小提琴演示

实现多行文本和省略号似乎是 javascript 的领域。

小开

我相信只有 CSS 的解决方案 text-overflow: ellipsis只适用于一行，所以你不能走这条路线:

.yourdiv {


line-height: 1.5em; /* Sets line height to 1.5 times text size */
height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
width: 100%; /* Use whatever width you want */
white-space: normal; /* Wrap lines of text */
overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
text-overflow: ellipsis; /* Ellipses (cross-browser) */
-o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

你试过用 http://tpgblog.com/threedots/代替 jQuery 吗？

小开

参见 http://jsfiddle.net/SWcCt/。

只要把 line-height设成 height的一半就行了:

line-height:20px;
height:40px;

当然，为了让 text-overflow: ellipsis工作，你还需要:

overflow:hidden;
white-space: pre;
小开

我见过的最好的一个是只有 CSS 和响应来自 Mobify Developer Blog-CSS 省略: 如何在纯 CSS 中管理多行省略:

JS 小提琴示例

CSS:

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}


.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA; }


.ellipsis:before {
content:"";
float: left;
width: 5px; height: 200px; }


.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px; }


.ellipsis:after {
content: "\02026";


box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;


text-align: right;


background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

网址:

<div class="ellipsis">
<div class="blah">
<p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>
</div>
</div>
小开

另一个简单快捷的解决方案

.giveMeEllipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show */
line-height: X;        /* fallback */
max-height: X*N;       /* fallback */
}

原问答的参考文献是 给你

小开

试试这样: http://jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p>


p {
line-height: 1.5em;
height: 3em;
overflow: hidden;
width: 300px;
}


p::before {
content: '...';
float: right;
margin-top: 1.5em;
}
小开

通常一行截断是非常简单的

.truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

两行截断是有点棘手，但它可以做到与 css 这个例子是在 sass。

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
overflow: hidden; /* hide text if it is more than $lineCount lines  */
position: relative; /* for set '...' in absolute position */
line-height: $lineHeight; /* use this value to count block height */
max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
padding-right: $padding-right; /* place for '...' */
white-space: normal; /* overwrite any white-space styles */
word-break: break-all; /* will break each letter in word */
text-overflow: ellipsis; /* show ellipsis if text is broken */


&::before {
content: '...'; /* create the '...'' points in the end */
position: absolute;
right: $ellipsis-right;
bottom: 0;
}


&::after {
content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
position: absolute;
right: 0;
width: $width;
height: 1rem * $lineCount;
margin-top: 0.2rem;
background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
}
}
小开

针对 Webkit 的 CSS 解决方案

// Only for DEMO
$(function() {


$('#toggleWidth').on('click', function(e) {


$('.multiLineLabel').toggleClass('maxWidth');


});


})
.multiLineLabel {
display: inline-block;
box-sizing: border-box;
white-space: pre-line;
word-wrap: break-word;
}


.multiLineLabel .textMaxLine {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}




/* Only for DEMO */


.multiLineLabel.maxWidth {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiLineLabel">
<span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span>
</div>
<br/>
<button id="toggleWidth">Toggle Width</button>

小开

只能用 CSS

    overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
小开

@ Asiddeen bn Muhammad 的解决方案对 CSS 做了一点小小的修改

    .text {
line-height: 1.5;
height: 6em;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
小开

在所有这些例子中，让我们假设我们有:

#someDiv {
width: 250px;
overflow: hidden;
}
小开

下面的内容对我很有用:

CSS:

.longWordBreakParent {
display: flex;
}
.longWordBreak {
word-break: break-all;
}

HTML:

<div className="longWordBreakParent">
<span className='longWordBreak'>someverylongtextthatcannotbefitinoneline</span>
</div>

有关详细信息，请参阅:
. < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/display”rel = “ nofollow norefrer”> https://developer.mozilla.org/en-us/docs/web/css/display
. < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/word-break”rel = “ nofollow norefrer”> https://developer.mozilla.org/en-us/docs/web/css/word-break

小开

我对这个问题的答案是“实现多行文本和省略号似乎是 Javascript 的领域”。

WebkitLineClamp: < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-箝”rel = “ nofollow noReferrer”> https://developer.mozilla.org/en-us/docs/web/css/-webkit-line-clamp WebkItBoxOrient: < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient”rel = “ nofollow noReferrer”> https://developer.mozilla.org/en-us/docs/web/css/box-orient

`.textWithTwoLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}`

提交答案