css省略号单行多行实现

2019-11-10 admin

参考参照

单行

<style> 
.demo { 
    heigh:300px;
    width:300px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
</style> 
<body> 
    <div class="demo">文字文字文字文字很长很长很长</div>
</body>

多行文本溢出省略

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)

<style> 
.demo { 
    display: -webkit-box; 
    overflow: hidden; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
} 
</style> 
<body> 
    <div class='demo'>文字文字文字文字很长很长很长</div> 
</body>

缺点

兼容性一般: -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持

利用 Float 特性,纯 CSS 实现多行省略

<style> 
    .demo { 
        background: #099; 
        max-height: 40px; 
        line-height: 20px; 
        overflow: hidden; 
    } 
    .demo::before{ 
        float: left;
        content:''; 
        width: 20px; 
        height: 40px; 
    } 
    .demo .text {
        float: right; 
        width: 100%; 
        margin-left: -20px;
        word-break: break-all;
    } 
    .demo::after{ 
        float:right; 
        content:'...'; 
        width: 20px; 
        height: 20px;
        position: relative; 
        left:100%; 
        transform: translate(-100%,-100%);
    } 
</style> 
<body> 
    <div class='demo'> 
        <div class="text">文字文字文字文字很长很长很长 ~~~~</div>
    </div> 
</body>

[转载]原文链接:https://segmentfault.com/a/1190000020947494

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78878.html

文章标题:css省略号单行多行实现

相关文章
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
回到顶部