是否有可能使用文本溢出：省略号多行文字？
我有一个特定的width和height的p标签。 我想使用text-overflow:ellipsis来得到...如果标签中的文本太长。 这是可能的解决与CSS多行文本？
谷歌search没有透露任何东西，甚至远程承诺，所以我要说，这是不可能的。
我确实发现了text-overflow: -o-ellipsis-lastline ，但它只能在Opera中使用 ： http : text-overflow: -o-ellipsis-lastline （mirror： http : text-overflow: -o-ellipsis-lastline / exugux / ）
还有一个类似WebKit的解决scheme： http : //dropshado.ws/post/1015351370/webkit-line-clamp
你可以用CSS来做。 它只能在webkit浏览器中运行，但是对于其他浏览器来说却是一个倒退。
使用 ：
display: -webkit-box; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
随着：
max-width: $maxwidth; overflow: hidden; text-overflow: ellipsis;
这里是小提琴： 演示
我发布这个，因为我相信我的解决scheme比stream行的，这涉及伪元素和浮动行为复杂。 我最近不得不创build一个可以在IE7中工作的解决scheme，所以伪元素首先不是一个选项。
该技术涉及4个要素：
- 块级容器，它确定内容的最大高度
- 文本内容的内联包装器
- 包含在内联包装中的省略号
- 内联包装器中的“fill”元素，当文本内容不超过容器的尺寸时，该元素遮挡省略号
与之前的纯CSS解决scheme一样，该技术要求内容具有纯色背景或固定位置的背景图像：省略号需要模糊部分文本，填充需要隐藏省略号。 你可以做一个奇特的渐变效果，使文本淡入省略号，但我会留下这个美容细节谨慎。
HTML结构
<!-- The block level container. `clamped-2` for 2 lines height --> <p class="clamped clamped-2"> <!-- The inline wrapper --> <span class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <!-- The ellipsis, which can contain anything you want - (a 'more' link, for example) --> <span class="ellipsis"> … </span> <!-- The fill, which covers the ellipsis when the text doesn't overflow --> <span class="fill"></span> </span> </p>
CSS
body { /* We need a solid background or background-position: fixed */ background: #fff; /* You'll need to know the line height to clamp on line breaks */ line-height: 1.5; } .clamped { overflow: hidden; position: relative; } /* Clamp to 2 lines, ie line-height x 2: Obviously any number of these classes can be written as needed */ .clamped-2 { max-height: 3em; } /* The ellipsis is always at the bottom right of the container, but when the text doesn't reach the bottom right... */ .clamped .ellipsis { background: #fff; bottom: 0; position: absolute; right: 0; } /* ...It's obscured by the fill, which is positioned at the bottom right of the text, and occupies any remaining space. */ .clamped .fill { background: #fff; height: 100%; position: absolute; width: 100%; }
这里有一个小提琴展示它 ：调整浏览器的宽度或改变文本，看看它从省略号切换到非省略号。
除了任意的优雅因素之外，我认为这比stream行的解决scheme更具性能，因为它不依赖浮动（需要大量重绘） – 绝对定位计算起来更简单，因为在计算时没有相互依赖关系布局。
我写了一个JavaScript函数来修复多行省略号问题
function ellipsizeTextBox(id) { var el = document.getElementById(id); var keep = el.innerHTML; while(el.scrollHeight > el.offsetHeight) { el.innerHTML = keep; el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1); keep = el.innerHTML; el.innerHTML = el.innerHTML + "..."; } }
希望这可以帮助！
修改user1152475的function，所以它逐字地（空间分隔），而不是逐个字符地工作。
function ellipsizeTextBox(id) { var el = document.getElementById(id); var wordArray = el.innerHTML.split(' '); while(el.scrollHeight > el.offsetHeight) { wordArray.pop(); el.innerHTML = wordArray.join(' ') + '...'; } }
请注意，对于这两种解决scheme，箱子必须有一个设定的高度。
HTML不提供这样的function，这是非常令人沮丧的。
这就是为什么我发展了一个小型图书馆来解决这个问题。 该库提供对象来build模和执行字母级别的文本呈现。 这应该只是你所需要的：
有关屏幕截图，教程和下载链接， 请访问http://www.samuelrossille.com/home/jstext阅读更多内容。;
正如之前所指出的那样，用David DeSandro发布的webkit-box来完成这个任务有一个奇怪的方法：
elements_to_style { display: -webkit-box; overflow : hidden; text-overflow: ellipsis -webkit-line-clamp: number_of_lines_you_want; -webkit-box-orient: vertical; }
以防万一有人来到这里，可能这是你的解决scheme吗？ 纯CSS跨浏览器。 http://codepen.io/issactomatotan/pen/LkJbjO
<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;"> <p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>
我find了一个多行跨浏览器纯CSS省略号的解决scheme。 我尝试了很多解决scheme，只有这个解决scheme只使用CSS。 我有一个dynamic宽度的div，必须设置高度。
这里的链接： http : //hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
我已经摆脱了这些解决scheme的大部分，你最好的select是使用坚实的clamp.js插件。 它可以在所有环境下工作，而且占用空间小（3K）。
嘿，你可以这样做使用CSS。
适用于Chrome和Safari
.block-with-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
对于Firefox和Internet Explorer
* styles for '...' */ .block-with-text { /* hide text if it more than N lines */ overflow: hidden; /* for set '...' in absolute position */ position: relative; /* use this value to count block height */ line-height: 1.2em; /* max-height = line-height (1.2) * lines max number (3) */ max-height: 3.6em; /* fix problem when last visible word doesn't adjoin right side */ text-align: justify; /* place for '...' */ margin-right: -1em; padding-right: 1em; } /* create the ... */ .block-with-text:before { /* points in the end */ content: '...'; /* absolute position */ position: absolute; /* set position to right bottom corner of block */ right: 0; bottom: 0; } /* hide ... if we have text, which is less than or equal to max lines */ .block-with-text:after { /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; /* set width and height */ width: 1em; height: 1em; margin-top: 0.2em; /* bg color = bg color under block */ background: white; }
.minHeightg{ height:5.6rem !important; width:20%; } .productOverflow { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 16px; /* fallback */ max-height: 3.6rem; /* fallback */ -webkit-line-clamp: 3; /* number of lines to show */ -webkit-box-orient: vertical; } /*firefox*/ @-moz-document url-prefix() { .productOverflow { overflow: hidden; text-overflow:ellipsis; display: -moz-box !important; line-height: 16px; /* fallback */ max-height: 3.6rem; /* fallback */ -moz-line-clamp: 3; /* number of lines to show */ -moz-box-orient: vertical; }
<div class="minHeightg"> <p class="productOverflow">Some quick example text to build on the card title .</p> </div>
