纯CSS 多行文本发出用省略号

切断多行文本是一个令人惊讶的很难的事情做好。

• overflow: 隐藏不提供任何提示的文本切断。
• text-overflow: 省略号只适用于单行的内容。
• 各种JavaScript的解决方案是脆弱的，因为他们需要明确的重新布局时，框的宽度或内容的变化。

上面的图片是GIF动画，显示了我们的CSS省略号方法的成品。请注意如何的省略号出现和消失时，窗口窄或宽。这里没有JavaScript 监听window resize 时间或者控制省略号元素的可见性。

点击查看演示DEMO

那是使用什么样的魔力做到的呢?

CSS省略号实施

在本教程下面的9个步骤，最终的的CSS省略号结果显示在上面的GIF动画，逐步实现。如果你想了解的技术是如何实现的，我们建议以下的链接和实验的代码示例。新手必看将提供更多的每个部分的概述。
显然，截断切割文字是最容易的部分。难的部分是获得一个元素出现在角落里如果需要截断，如果容器内容不足不需要截断。这样做是很困难的，我们将开始不同-放置一个元素在角落里如果容器过短。

01-idea. 两个文本示例使用固定的高度包含三个浮动的元素。第一个“prop”浮动是用来对其中的内容进行比较。当“main”的内容是短于或等于高度 “prop”，“end”元素都可以自由贴在右下角。当“main”的内容长于“prop”，“end”元素被陷入在“prop”之下。

02-switchchange. 现在,让我们正确的展现省略号元素，在内容文字太长的情况下，实现这项功能。处于演示的原因，我们将创建一个新的”realend”元素在”end”元素后。”realend”元素是相对于”end”元素被定位在角落里。因此，当”end”元素的位置在容器外被陷入在“prop”之下时，”realend”元素位置会在容器的底部的右边，如果”end”元素在容器里，则”realend”元素会在容器外。

.realend {
    position: absolute;
    width: 100%;
    top: -50px;
    left: 300px;
    ...

这开始看起来像一个真正的文本溢出的实现，但是所有的探索面对的宽度是固定的。

03-relative. 在此步骤中，我们不作任何视觉上的变化。然而，我们消除“end”和位置“realend”在合适的地方，通过使用position：relative而不是position：absolute。position：relative 这里是完美的，因为它转移为目的的渲染元素的位置同时保持其原有布局的目的。

04-narrow. 这将是繁琐的调整“prop”每一次的大小“realend”省略号省略号跟着的变化。替代方式，我们减小“prop”，防止它浪费空间，通过使用负margin。注意，如何使用负margin技巧在”realend”上保持使用5像素的空间在”prop”上以适应。

.realend {
    float: right; position: relative;
    top: -50px; left: 300px;
    width: 100px; margin-left: -100px;
    padding-right: 5px;
    ...

05-fluid. 在这一步中，我们切换容器的宽度百分比，以使他们能够扩大视口。因为负margin关于“realend”补偿它的宽度，从而允许使用left：100％，这是比较容易做到的。

06-sweep. 我们取代我们的“prop”和“realend”元素用 :before，:after 生成的内容。这允许简化的标记结构。外的“wrap”的元素被重新命名为“ellipsis”。

07-overflow. 我们运用溢出隐藏内部运作的布局。此外，wrap 元素扩大，从50％到100％，因为我们不再试图证明放置的“realend的”元素内容时，文字变得非常短。内容长度的增加来弥补。

08-complete.更改的内容：使用一个实际的省略号后生成的元素，并应用一个透明到白色的渐变背景隐藏任何文本覆盖。调试特定的属性，如背景突出显示，半透明度删除，我们到达我们的最终结果。

09-readmore. 我们有点画蛇添足，通过添加更多的文本出现溢出的文本或者部分内容的一部分，但不能同时使用。我们还覆盖所有的文字display:block。这是比wrapping content的链接，因为块状元素不能包含在链接元素内。

CSS省略号浏览器支持

到目前位置我们测试了 Safari 5.0, IE 8 (must be in standards mode), Opera 12 and Firefox 15.

老的浏览器仍然能工作的很好,在布局在正常的定位、空白边和补白的属性下。 如果你的平台是老(如。火狐3.6,IE 8),您可以使用该方法但作为渐进增强的方式。

生成的内容可能也是一个争论点的老式浏览器,但可以替换为空的元素。

CSS省略号限制

如果你依靠淡出效果,你需要一个坚实的背景下你的文本。您也可以使用不同的外观溢出指示元素，如撕裂或折叠的角落或墨迹回避这个限制。

自从你会切断多行文本使用overflow:hidden,你需要计算避免削减一半的最后一行。注意你的垂直网格,并确保无论多少行你的headers(s)和paragraph(s)带,最后一行的内容在同一地方满溢的容器的底部。

转载请注明：cocss » 【变换思维】纯CSS如何管理多行内容的省略号

点击查看演示DEMO

 

原文地址： http://www.cocss.com/1382.html