css单行省略和多行省略,css超出三行省略号

　　如何表现文字的溢出，你的需求是什么？单线还是多线？截断、省略号、自定义样式、自适应高度？你可以在这里找到答案。接下来，我将带你从浅入深，从原理到实现，一步步揭开多行省略号的面纱。让我们从最简单的单行溢出省略开始，

热身，单行省略

　　这是整个宇宙的统一方案，没有太多的魔法。

　　/*原则：设置文本不换行，溢出时隐藏，省略符号截断*/。省略号{空白：nowrap文本溢出：省略号；溢出：隐藏；}如何实现多行省略？让我们从最简单的线夹开始。

最简单的多行省略，line-clamp

　　 CSS属性-webkit-line-clamp可以将块容器中的内容限制为指定的行数。省略号{ display:-WebKit-box；-WebKit-line-clamp:2；-webkit-box-orient:垂直；溢出：隐藏；} attribute的-webkit前缀告诉我们事情看起来并不简单。可以，只支持基于webkit内核的浏览器，非常手机友好。在Android 2.3和IOS 5.0设备上，可以直接抛出上述代码，没有任何问题，但如果要在PC上使用，就需要注意兼容性问题。

　　除了PC兼容性，line-clamp的方案不支持自定义省略号。如果需要在省略号后添加文字、箭头等自定义样式，我们可能要考虑其他方案，比如浮动。

神奇的 float，浮动

　　什么！浮动也能实现多行省略吗？是的，下面我们用三个浮动框来模拟多行省略号。首先，准备三个框(文本框、占位符框和带有自定义样式的省略号框)浮动到右边。为了方便理解原理，我们给盒子加上不同的背景色。

　　div class=box ！-Text box-div class= box _ _ text 腾讯用技术丰富了互联网用户的生活。通过通讯和社交软件微信和QQ，我们可以促进用户的联系，帮助他们连接数字内容和生活服务，一切都在指尖。/div！-placeholder box-div class= box _ _ placeholder /div！-自定义省略号框-div class= box _ _ more .expand/div/div style . box _ _ text { width:100%；高度：60px行高：20px背景色：粉色；浮动：对；} .box _ _ placeholder { width:60px；高度：60px背景色：灰色；不透明度：0.8；浮动：对；} .box _ _ more { width:60px；文本对齐：右对齐；背景：黄色；浮动：对；}/style接下来，开始调整位置。首先，给文本框一个负的左外边距，其值正好是占位符框的宽度。box _ _ text { margin-left:-60px；}这为占位符框提供了空间，占位符框将向左浮动并与文本框对齐，

　　在上图中，文本框的高度小于占位符框的高度。此时第一行的高度就是占位符框的高度，第一行没有多余的空间。我们的自定义省略框只能放在第二行。想象一下当文本框的高度大于占位符框的高度时会发生什么(例如，文本显示4行)。

　　文本框将拉伸第一行的高度。这时候第一排有多余的空间，省略的框可以挤进去。

　　太棒了，接下来，只需将省略号框定位在占位符框所在的同一行的右侧即可。box _ _ more { position:relative；左：100%；transform:平移(-100%，-100%)；}修饰一下，去掉背景色，在容器中设置溢出隐藏，然后在省略的框中添加一个文字颜色和渐变。框{位置：相对；溢出：隐藏；}.box _ _ more { color:# 1890 ff；背景图像：线性渐变(向左，白色40%，rgba(255，255，255，0.8) 70%，透明100%)；}总而言之，这里实际上运用了浮动和BFC的原理。

　　盒子的外层通过overflow: hidden创建一个BFC，浮动框的区域不会与BFC重叠。计算BFC高度时，浮动元素也会参与计算，浮动框会浮动到当前行的开头或结尾。借助一些定位技术，可以模拟多行省略的效果。

　　浮动方案的优点是显而易见的，

　　兼容性强，支持所有主流PC，手机浏览器支持带渐变的自定义文本省略号样式。因为省略号样式区域本质上是一个浮动框，这里我们需要使用渐变来防止偷懒。对于一些背景颜色复杂的区域，或者一些自定义省略号样式要求比较强的区域(如定义为箭头或图片的省略号样式等。)，这个方案就开始显得不充分了。

　　有没有其他方法可以完全自定义省略号样式？

　　是，保留自定义省略号框的位置。

　　那么怎么预约呢？我们可以使用线夹。省略号被换行符截断了.正好可以帮我们占领阵地。如果能通过某种手段隐藏默认的省略号，用我们自定义的浮动框代替，不是也可以吗？这是我们接下来要介绍的方案。

完全自定义，浮动 + line-clamp

　　我们来重新整理一下上面的思路。有三个关键点。

　　借助线夹的默认省略号，预留自定义省略号框的位置，想办法隐藏默认省略号，通过定位技术为我们替换预留的省略号框。

　　一个一个，首先是预留位置。换行的缺省省略号受字体大小的影响，所以可以通过调整字体大小来控制保留位置。这里，为了保证省略号的大小只受字体大小的影响，我们可以重新设置行高和文本间距。box _ _ text { position:relative；显示：-WebKit-box；-WebKit-line-clamp:3；-webkit-box-orient:垂直；字体大小：60px行高：0；字母间距：0；/*重置行高和文本间距，确保省略号占位只受字号影响*/color:red；/*为了演示方便，我们先给省略号一个颜色*/}，这样我们只需要调整文本框的字体大小就可以控制保留省略号框位置的大小。由于字体大小将被继承，我们嵌入一个子框来重置字体大小。

　　div class= box _ _ text div class= box _ _ inner 腾讯用技术丰富了网民的生活。通过通讯和社交软件微信和QQ，我们可以促进用户的联系，帮助他们连接数字内容和生活服务，一切都在指尖。/div/divstyle。box _ _ inner { font-size:16px；行高：20px颜色：# 000；垂直对齐：顶部；显示：内嵌；}/style下一步是找到隐藏省略号的方法。这个相对简单，你可以设置透明度或者颜色透明度。box _ _ text { opacity:0；颜色：透明；}有了省略号的预留位置，我们就得想办法把自定义省略号框定位到预留位置。我们做什么呢还在漂浮。由于-webkit-line-clamp的设置，文本框无法拉伸到全高。为了使用浮动来实现定位，我们可以渲染一个额外的副本来拉伸高度。

　　准备一个绝对定位的盒子作为呈现高度展开文案的容器，

　　腾讯用技术丰富了互联网用户的生活。通过通讯和社交软件微信和QQ，我们可以促进用户的联系，帮助他们连接数字内容和生活服务，一切都在指尖。/div div class= box _ _ placeholder /div div class= box _ _ more .expand/div/div style . box _ _ ABS { position:absolute；top:0；左：0；宽度：100%；}/style然后我们用前面说的三个浮动框实现多行溢出省略的方式。box _ _ fake-text { width:100%；左边距：-60px；行高：20px浮动：对；颜色：透明；/*文案就是扩展高度，用浮动*/}实现多行溢出。box _ _ placeholder { width:60px；高度：60px浮动：对；}.box _ _ more { position:relative；左：100%；transform:平移(-100%，-100%)；宽度：60px文本对齐：右对齐；颜色：# 1890ff浮动：对；}需要注意的是，这里的文本框是为了扩展高度而设计的，不需要显示，所以我们设置了颜色透明度。好了，最后一步，去掉背景色，设置溢出隐藏在外盒里就是我们最后的效果了。

　　换行浮动方式可以实现省略号的完全定制。我们重新设置行高和文本间距，只需要调整外框字体大小来控制自定义省略号框的宽度。省略号框可以用任意箭头、图片、边角或者文字代替，再也不用担心UI Miss的要求了):

　　关于纯CSS自定义多行省略问题的这篇文章到此为止(从原理到实现)。更多相关CSS自定义多行省略，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。