CSS 文本截断方案

标签：creat   ellipsis   webkit   height   位置   col   香港   sum   cin   

单行截断

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

此方法兼容到ie6过。不过只能单行。

多行截断

.wrap {
  width: 200px;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="wrap"> 
  <div class="ellipsis"> 《宝可梦》，另有常见非官方译名：《口袋妖怪》(中国大陆官方译名)、《宠物小精灵》(中国香港译名)、《神奇宝贝》（中国台湾译名），是由Game Freak和Creatures株式会社开发</div> 
</div>

此方法webkit私有，并且使用flex布局，只得在移动端和高版本 -webkit- 系列浏览器使用。

多行截断2

利用浮动元素特性模拟最后的省略号。

<div class="wrap">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.
    </div>
</div>

.wrap {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}
.wrap .text {
    float: right;
    margin-left: -5px;
    width: 100%;
    word-break: break-all;
}
.wrap::before {
    float: left;
    width: 5px;
    content: '';
    height: 40px;
}
.wrap::after {
    float: right;
    content: "...";
    height: 20px;
    line-height: 20px;
    /* 为三个省略号的宽度 */
    width: 3em;
    /* 使盒子不占位置 */
    margin-left: -3em;
    /* 移动省略号位置 */
    position: relative;
    left: 100%;
    top: -20px;
    padding-right: 5px;
    /*background-color: #FFF;*/
    background: -webkit-linear-gradient(left, transparent 0%, #FFF 50%, #FFF 100%);
    background: linear-gradient(to right, transparent 0%, #FFF 50%, #FFF 100%);
    text-align: right;
}

兼容性好，对各大主流浏览器有好的支持。

响应式截断，根据不同宽度做出调整。

文本超出范围才显示省略号，否则不显示省略号。

但是很麻烦，有些hack性质

CSS 文本截断方案

标签：creat   ellipsis   webkit   height   位置   col   香港   sum   cin   

原文地址：https://www.cnblogs.com/everlose/p/12493187.html