web 文本溢出处理显示省略号

最新推荐文章于 2024-07-30 16:49:30 发布

xuxu_77

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量463

点赞数

文章标签：前端 servlet html

本文链接：https://blog.csdn.net/xuxu_77/article/details/126090155

版权

1、单行文本溢出显示省略号

方法1：省略号

单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号

<style>
.box{
    width:200px;
    background-color:red;
    height:40px;
    line-height:40px;
    /* 关键代码 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
</style>

<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div> 
</body>

方法2：伪元素

  <style>
        .box {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: orchid;
            
            overflow: hidden;/* 溢出隐藏 */
            white-space: nowrap;/* 强制不换行 */
            position: relative;/* 子绝父相 */

        }
        .box:after {
            content: "...";