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

我想只在特定宽度的div内的两行内包装一个文本。 如果文本超出两行的长度，那么我想显示elipses。 有没有办法做到这一点使用CSS？

例如

Sample text showing wrapping of text in only two line... 

谢谢

Answer 1

如果设置了元素的line-height和height ，并设置了overflow:hidden; ，则可以将输出限制为两行文本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 */ } 

— jsFiddle DEMO —

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

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

和一个演示：

— jsFiddle DEMO —

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

Answer 2

我见过的最好的只有CSS和响应来自Mobify开发者博客 – CSS省略号：如何pipe理纯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); } 

HTML：

 <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> 

Answer 3

我相信只有CSS解决scheme的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？;

Answer 4

另一个简单快捷的解决scheme

 .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 */ } 

原始问题和答案的参考在这里

Answer 5

请参阅http://jsfiddle.net/SWcCt/ 。

只需设置一个line-height的一半height ：

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

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

 overflow:hidden; white-space: pre; 

Answer 6

尝试这样的： 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; } 

Answer 7

使用下面的链接换行两行检查链接

如果内容太宽，则将省略号（…）插入到HTML标记中

这需要下面的jQuery

http://www.jeremymartin.name/projects.php?project=jTruncate

Answer 8

通常，一行截断非常简单

 .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. */ } } 

Answer 9

Webkit的CSS解决scheme

 // 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>