css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法。
一. 单行文本不换行,并将超出文本隐藏
.box-content{
overflow: hidden;//文本溢出隐藏
text-overflow: ellipsis;//文本溢出显示省略号
white-
space
: nowrap;//不换行
}
二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号
在webkit内核中,可以利用-webkit-line-clamp属性,它的值是数字(1, 2, 3…),但它不是CSS标准,只在webkit中实现,必须针对块级元素,
并将元素的display属性设为:-webkit-box,
以及-webkit-box-orient属性设为:vertical,具体如下:
.box-content{
display: -webkit-box;
//将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical;
//伸缩方向设为垂直方向
-webkit-line-clamp:
3
;
//超出3行隐藏,并显示省略号
}
因为它是webkit内核浏览器的实现,对于其他浏览器并不兼容,所以为了兼容更多的浏览器,可以如下的方法来实现。
三. 兼容所有浏览器的方法
这种方法利用css的伪选择器after来实现,将元素定位设为relative,将伪选择器设为absolute,在对伪选择器的位置进行调整即可。如下:
两行溢出省略
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
width: 60px;
}
p::after {
display: block;
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
}
提示:设置要显示的行数只需要将height设为line-height的整数倍即可。
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
css文本溢出隐藏显示省略号(单行+多行)的更多相关文章
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- CSS文本溢出,显示省略号(...)
方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- css 文本溢出时显示省略号
.text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css 文本换行 文本溢出隐藏用省略号表示剩下内容
正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...
- text-overflow文本溢出隐藏“...”显示
一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
随机推荐
- 网页中的数据的4个处理方式:CRUD(Creat, Retrive, Update, Delete)
网页中的数据的4个处理方式:CRUD(Creat, Retrive, Update, Delete) 2018-12-21, 后续完善
- Vuejs——(6)Vuejs与form元素
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 本 ...
- MVC笔记之一:MVC编程模型
MVC是ASPX.NET用于构造Web应用的一种框架,和传统的ASPX.NET开发模式(Web Form)在架构上相同,同样采用三层框架实现,但相比传输开的模式,各层架构更加规范. 传统三层架构: V ...
- 从零搭建java后台管理系统(二)mysql和redis安装
接上篇开始安装mysql和redis 注意了,如果用阿里云服务器,外网访问的端口必须在安全组开启,否则外网访问不通 三.服务器安装redis和mysql 本次环境搭建将所有第三方服务会安装在阿里云服务 ...
- Linux 定位网络不通问题
[参考文章]:ping命令入门详解 1. ipconfig / ifconfig 1. 作用: 检查本地的网络配置是否正确 2. ping 1. 作用: 一个十分好用的TCP/IP工具.它主要的功能是 ...
- Javascript 实现[网红] 时间轮盘
话不多说,先上图. 成品链接 大致效果如上图,接下来就开始制作吧. HTML部分: 我们需要将容器旋转rotate使之以圆点为中心. 怎么转呢,请看图. 将同一级的容器用一个大的容器包裹起来,绝对定位 ...
- 机器学习技法笔记:05 Kernel Logistic Regression
Roadmap Soft-Margin SVM as Regularized Model SVM versus Logistic Regression SVM for Soft Binary Clas ...
- Python3自动化运维之Fabric模版详解
一.概要 Fabric是基于Python(2.7,3.4+以上版本)实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括 ...
- kubernetes入门之获取私有仓库镜像
一般情况下,我们项目构建的镜像统一会推送至私有仓库,那么这里大家可以参考阿里云的私有仓库搭建教程.那么我们可以通过以下步骤拉取: 1.推送及拉取镜像 1.1. 登录阿里云Docker Registry ...
- Golang标准库——io-结构
结构 LimitedReader 定义 限制从Reader中读取的字节数. type LimitedReader struct { R Reader // underlying reader N in ...