Javascript 一两行后的 CSS 单词省略号 ('...')
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11665229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS word ellipsis ('...') after one or two lines
提问by user349072
I'm trying to create a word-wrap in JavaScript using CSS, and the condition is:
我正在尝试使用 CSS 在 JavaScript 中创建自动换行，条件是：
If DIV contains one verylong word, such as "asdasfljashglajksgkjasghklajsghl", I want to display:
如果 DIV 包含一个很长的单词，例如"asdasfljashglajksgkjasghklajsghl"，我想显示：
|asdasfljashglajk...|
If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display:
如果 DIV 包含一个很长的句子，例如“如果我每次被告知我不能时都有一角钱”，我想显示：
|if i had a dime for|
|everytime i was... |
I work with HTML, CSS, JavaScript. I can't use jQuery.
我使用 HTML、CSS、JavaScript。我不能使用 jQuery。
Please let me know if it's possible.
如果可能，请告诉我。
采纳答案by Prashobh
For this you can use text-overflow: ellipsis;property. Write like this
为此，您可以使用text-overflow: ellipsis;属性。像这样写
white-space: nowrap;
text-overflow: ellipsis;
回答by alecs.popa
I know I'm a bit late with the anwser but I just wrote a pice of code that accomplices that:
我知道我对 anwser 有点晚了，但我只是写了一段代码，它的同谋：
if ($('your selector').height() > 50) {
var words = $('your selector').html().split(/\s+/);
words.push('...');
do {
words.splice(-2, 1);
$('your selector').html( words.join(' ') );
} while($('your selector').height() > 50);
}
and of course you should save the jQuery selector in a variable so you don't query the DOM every time.
当然，您应该将 jQuery 选择器保存在一个变量中，这样您就不会每次都查询 DOM。
回答by Mouscellaneous
Found this:
发现这个：
http://codepen.io/martinwolf/pen/qlFdp
http://codepen.io/martinwolf/pen/qlFdp
Looks like -webkit-line-clampworks in some browsers.
看起来-webkit-line-clamp在某些浏览器中有效。
回答by Alex Wayne
Sadly, with CSS alone I don't think you can.
可悲的是，仅使用 CSS，我认为您无法做到。
text-overflow: ellipsis;onlyworks with white-space: nowrap;which prevents multiple lines.
text-overflow: ellipsis;仅适用于white-space: nowrap;防止多行。
There probably is a crazy javascript solution that keeps chopping off words until the element height is acceptable, but that will be slow and pretty damn hacky nasty.
可能有一个疯狂的 javascript 解决方案，它会不断砍掉单词，直到元素高度可以接受为止，但这会很慢，而且非常讨厌。
回答by user2274431
when you'll be allowed to use jQuery you could see the dotdotdot plugin at this link.. very simple to use and it works great!
当您被允许使用 jQuery 时，您可以在此链接中看到 dotdotdot 插件。使用起来非常简单，而且效果很好！
For the moment i can suggest you to have a look at this fiddle! whould work the text-overflow: ellipsis
目前我可以建议你看看这个小提琴！谁可以工作text-overflow: ellipsis
回答by TbWill4321
After fiddling around with the CSS to come up with a "next-best" CSS ONLY solution, I came up with this:
在摆弄 CSS 以提出“次佳”仅 CSS 解决方案后，我想出了这个：
p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }
This would always assume you have at least 3 lines of text, and there are a couple of issues with it. If the last word to wrap onto line 4 is very long, there would be an unusually large blank space between the last word and the ellipsis. Similarly, it could overlap the last word if it was something very, verysmall, like "a".
这将始终假设您至少有 3 行文本，并且存在一些问题。如果要换到第 4 行的最后一个单词很长，则最后一个单词和省略号之间会出现异常大的空格。同样，如果最后一个单词非常非常小，例如“a” ，它可能会与最后一个单词重叠。
You could add another container and have the ellipsis outside of the p, and with a bit of comment tweaking I'm sure someone will fiddle up something better.
您可以添加另一个容器并将省略号放在p.
回答by Julian Tellez
Hope this answers your question
希望这能回答你的问题
@mixin multilineEllipsis(
$lines-to-show: 2,
$width: 100%,
$font-size: $fontSize-base,
$line-height: 1.6) {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: $width;
height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
font-size: $font-size;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
http://codepen.io/martinwolf/pen/qlFdphttp://caniuse.com/#search=-webkit-line-clamp
http://codepen.io/martinwolf/pen/qlFdp http://caniuse.com/#search=-webkit-line-clamp
回答by Dilip Nannaware
Displaying the ellipsis needs to be handled differently when the width of container is fixed and percentage.
当容器的宽度是固定的和百分比时，显示省略号需要不同的处理。
- When width of container is fixed
- 当容器宽度固定时
.nooverflow{
display: inline-block;
overflow: hidden;
overflow-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
}- When width of container is in percentage or auto, in this scenario define another tag in that container to render the text and specify width as 0 and min-width as 100%, that way it will take the width of container and show the ellipsis. Below is the LESS class to be used:
- 当容器的宽度为百分比或自动时，在这种情况下，在该容器中定义另一个标签来呈现文本并将宽度指定为 0，最小宽度为 100%，这样它将采用容器的宽度并显示省略号。下面是要使用的 LESS 类：
.nooverflow{
display: inline-block;
overflow: hidden!important;
overflow-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap!important;
width: 0;
min-width: 100%;
}回答by Ryan Walton
If you can guarantee the content will run over, here is the solution I came up. It works for my site and I wanted to keep it simple.
如果你能保证内容会跑完，这是我想出的解决方案。它适用于我的网站，我想保持简单。
html:
html：
<p class="snippet">
[content]
</p>
css:
css：
.snippet {
position: relative;
height: 40px; // for 2 lines
font-size: 14px; // standard site text-size
line-height: 1.42857; // standard site line-height
overflow: hidden;
margin-bottom: 0;
}
.news-insights .snippet:after {
content: "026";
position: absolute;
top: 19px;
right: 0;
padding-left: 5px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}
You can then play around with the padding and background gradient to get a more stylish presentation.
然后，您可以使用填充和背景渐变来获得更时尚的演示。
