css实现长文本超出宽度隐藏显示省略号

前端 潘老师 2个月前 (12-13) 60 ℃ (0) 扫码查看

本文主要讲解css如何实现长文本超出指定宽度,超出的部分隐藏并显示为省略号相关内容,有时候我们某个css元素内的内容太长,我们只想显示1行或指定行数,超出的部分,让它显示为省略号效果,比如文章摘要内容等,下面我们一起来看下该如何实现吧。

单行超出显示省略号

CSS中可以使用text-overflow属性来控制文本的显示效果。当内容过长时,可以通过设置该属性为ellipsis(省略号)或者其他值来达到超出部分被隐藏并添加省略号的效果。

下面是一段HTML代码示例,展示了如何在CSS中应用这个样式:

<style>
    .hidden {
        width: 200px; /* 指定元素的宽度 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 添加省略号 */
    }
</style>
 
<div class="hidden">
    欢迎访问潘子夜个人博客(www.panziye.com),这里是需要进行省略处理的文本内容
</div>

上述代码将会创建一个具有特定宽度、不换行且超出部分隐藏的 <div> 元素,同时还会自动添加省略号作为结尾标志。效果大家可以自己试试就知道了。

指定行超出显示省略号

有时候文本内容太长,保留一行可能显示的内容有不够充分,像指定超出指定行,超出的部分再显示未省略号,又该怎么实现呢?我们看下下面的案例,指定显示2行,超出的显示省略号:

<style>
    .hidden {
        width: 200px; /* 指定元素的宽度 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 添加省略号 */
        display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示。*/
       -webkit-box-orient:vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
       -webkit-line-clamp:2;  /*这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。*/
    }
</style>
 
<div class="hidden">
    欢迎访问潘子夜个人博客(www.panziye.com),这里有免费的学习资源和模板代码,欢迎常来,这里是需要进行省略处理的文本内容
</div>

如果想修改显示行数,直接修改-webkit-line-clamp的属性值即可。

以上就是css如何实现长文本超出指定宽度,超出的部分隐藏并显示为省略号相关内容,并且还扩展了显示指定行超出部分隐藏显示省略号,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12517.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】