CSS面试20真题高频版- CSS如何实现单行，多行文本溢出省略样式单行文本溢出省略同时设置以下属性： white-s

单行文本溢出省略

同时设置以下属性：

white-space: nowrap‌;强制文本不换行，确保文本在一行内显示‌
overflow: hidden‌;隐藏溢出的内容。
text-overflow: ellipsis(英/ɪˈlɪpsɪs/)

‌使用text-overflow属性时，需要配合overflow和white-space属性

  // text-overflow的几个属性值
  ‌clip：直接裁剪文本，不显示溢出部分‌。
 ‌ ellipsis：在溢出部分显示省略号
  string：使用给定的字符串来代表被修剪的文本（不是所有浏览器都支持）‌

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<p>c</p >

多行文本溢出省略号

基于高度截断

核心的 css 代码结构如下:

position: relative:为伪元素绝对定位
overflow: hidden:文本溢出限定的宽度就隐藏内容
position: absolute:给省略号绝对定位
line-height: 20px:结合元素高度,高度固定的情况下,设定行高,控制显示行数
height: 40px:设定当前元素高度
∷after{}:设置省略号样式

代码如下：

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }

    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</div>
</body>

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过overflow:hidden多余文字隐藏这种实现具有以下优点:

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置 word-break: break-all 使一个单词能够在换行时进行拆分

基于行数截断

同时设置以下属性：

-webkit-line-clamp: 数字:用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的Webkit属性)
display: -webkit-box:和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical:和1结合使用，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden:文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis:多行文本的情况下，用省略号“...”隐藏溢出范围的文本

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p >

可以看到，上述使用了webkit的 CSS 属性扩展，所以兼容浏览器范围是 PC 端的 webkit 内核的浏览器，由于移动端大多数是使用 webkit ，所以移动端常用该形式需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性还能通过使用 javascript 实现配合css ，实现代码如下所示结构加下

css结构如下：

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;
    }
.p-after:after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
   }

javaScript代码如下：

$(function(){
    //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
    $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });

})