CSS 实现的文本截断

考察如下代码实现文本超出自动截断的样式代码:

.truncate-text-4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}

使用如下的 HTML 片段进行测试:

<style>
.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
}
</style>
<div class="my-div truncate-text-4">
How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike James.
Thursday, 16 February 2017. Sometimes simple algorithms are just wrong. In
this case shuffling an .... In other words as the array is scanned the element
under
</div>

运行效果:

通过 CSS ellipsis 实现的文本截断效果

padding 的问题

一切都很完美,直到给文本容器加上 padding 样式后。

  .my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
+ padding: 30px;
}

现在的效果是这样的:

padding 破坏了文本截断

因为 padding 占了元素内部空间,但这部分区域却是在元素内部的,所以不会受 overflow: hidden 影响。

解决办法

line-height

当设置的 line-height 适当时,或足够大时,可以将 padding 的部分抵消掉以实现将多余部分挤出可见范围的目标。

.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
padding: 30px;
+ line-height: 75px;
}

通过 line-height 修复

这种方式并不适用所有场景,因为不是所有地方都需要那么大的行高。

替换掉 padding

padding 无非是要给元素的内容与边框间添加间隔,或是与别的元素间添加间隔。这里可以考虑其实方式来替换。

比如 margin。但如果元素有背景,比如本例中,那 margin 的试就不适用了,因为元素 margin 部分是不带背景的。

还可用 border 代替。

.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
- padding: 30px;
+ border: 30px solid transparent;
}

使用 border 替换 padding

毫不意外,它仍然有它的局限性。就是在元素本身有自己的 border 样式要求的时候,就会冲突了。

将边距与内容容器分开

比较普适的方法可能就是它了,即将内容与边距分开到两个元素上,一个元素专门用来实现边距,一个元素用来实现文本的截断。这个好理解,直接看代码:

<div className="my-div">
<div className="truncate-text-4">
How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike
James. Thursday, 16 February 2017. Sometimes simple algorithms are just
wrong. In this case shuffling an .... In other words as the array is scanned
the element under
</div>
</div>

而我们的样式可以保持不动。

将边距与内容容器分开

相关资源

CSS ellipsis 与 padding 结合时的问题的更多相关文章

  1. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  2. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  3. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  4. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

  5. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  6. css样式兼容各个浏览器时的部分总结

    [本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...

  7. 使用CSS让元素尺寸缩小时保持宽高比例一致

    CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...

  8. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  9. css盒子模型 padding

    注意: 行内元素的内边距的top和bottom是不起作用的,想让他起作用要让他变成块元素加:display:bloock 注意: 如果元素设置了背景,那么背景会填充到内容区+内边距区 利用paddin ...

随机推荐

  1. android CTS 介绍

    [转]http://blog.csdn.net/pugongying1988/article/details/6976091 一.为什么需要兼容性测试(以下称CTS)? 1.1.让APP提供更好的用户 ...

  2. 【Offer】[53-3] 【数组中数值和下标相等的元素】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 假设一个单调递增的数组里的每个元素都是整数并且是唯一的.请编程实现一个函数,找出数组中任意一个数值等于其下标的元素.例如,在数组{-3, ...

  3. Java Web总结(一)-- 入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  4. docker-将自己的Linux打包为镜像

    基于原始文件和目录从0开始制作镜像: 1).基于CentOS7 Linux纯净系统(初始化安装完成),将Linux整个系统打包成tar文件即可: cd /root/ tar --numeric-own ...

  5. 讲解开源项目:让你成为灵魂画手的 JS 引擎:Zdog

    本文作者:HelloGitHub-kalifun HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  6. Python--使用四种随机方法(Random)来产生随机价格

    import random # 卖橘子的计算器:写一段代码,提示用户输入橘子的价格,# 然后随机生成购买的斤数(5到10斤之间),最后计算出应该支付的金额! # 第一种# orange_price = ...

  7. CSS3-边框 border

    一.圆角效果 border-radius 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px ...

  8. 为什么使用B+Tree索引?

    什么是索引? 索引是一种数据结构,具体表现在查找算法上. 索引目的 提高查询效率 [类比字典和借书] 如果要查"mysql"这个单词,我们肯定需要定位到m字母,然后从下往下找到y字 ...

  9. php 上传word文件 Word文件转 PDF

    说一下,之前的时候做上传word文档转pdf的项目时候, 通过安装open office 连接服务组件, 遇到种种问题, 例如上传的word文档版本,, word文档中编辑的样式复杂会出现转pdf失败 ...

  10. Roman and Browser-罗曼的浏览器 CodeForce1100A 暴力

    题目链接:Roman and Browser 题目原文 This morning, Roman woke up and opened the browser with