首页 > 代码库 > 超出文本显示省略号

超出文本显示省略号

2024-09-13 17:56:18   218人阅读

对于大多数刚入门的程序员，都是不是太注重代码的细节，也就是写出来的代码不是太完善。有些我们设置的标签能放下6个字，后期我们又要加多几个字，又不能改变标签的宽度，又要保持外观样式的美观性，那我们怎么办的？下面我就给大家介绍一种超出文本显示用省略号代替的一种方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省略号</title>
    <style type="text/css">
        .out{
            margin: 50px auto;
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /*宽度固定的时候*/
/*这种方法实现效果，没有兼容性问题。*/
        .out span{
            display: inline-block;
            width: 200px;
            /*超出部分隐藏*/
            overflow: hidden;
            /*文本不换行*/
            white-space: nowrap;
            /*超出不封用三个省略号代替*/
            text-overflow: ellipsis;
        }
        /*宽度不固定的时候*/
        /*这种方法可以实现上面那种效果，不过有兼容性问题。*/
      .out p{ /*box-flex布局*/ display: -webkit-box; 
       /*内容的排列顺序：垂直排列*/ 
      -webkit-box-orient: vertical; 
      /*允许显示几行*/ 
      -webkit-line-clamp:1; 
       /*超出部分隐藏*/ 
     overflow: hidden; } 
   </style> 
</head> 
<body> 
<div class="out">
 <span>春天到了天气暖和了快点出来吧小芽苞别只露出个小头树皮外面多美快点出来吧太阳会给你穿上绿衣春风会送给你甜甜的露滴</span>
 <p>悄悄的拱出大地想来打听春天里树绿的秘密花开的消息</p>
 </div> 
 </body> 
</html>

　　

超出文本显示省略号


联系
我们