ellipsis单行文本和-webkit-box多行文本超出部分显示省略号
来源:互联网 发布:网易企业邮箱域名备案 编辑:程序博客网 时间:2024/05/21 11:09
用到了单行文本与多行文本超出部分显示省略号,记录一下笔记。
1.单行文本显示省略号
代码这样写文本会超出红线边框:
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>超出部分显示省略号</title> <style type="text/css"> p{ width:100px;//宽度 height:55px;//高度 border:1px solid red;//边框 } </style> </head> <body> <p>ellipsis单行文本和-webkit-box多行文本超出部分显示省略号</p> </body></html>
没有设定时文本会超出红线边框:
如果想使文本变成一行,超出部分显示省略号,则给p增加ellipsis和hidden样式:
p{ width:100px;//宽度 height:55px;//高度 border:1px solid red;//边框 text-overflow:ellipsis;//设定修剪方式 white-space:nowrap; //设定换行方式,nowrap表示不换行 overflow:hidden;//设定超出规定宽高部分则隐藏}
效果:
2.多行文本显示省略号
上面的方法只能使用在单行文本,在多行文本时没有效果的,如果想使多行文本超出部分显示省略号,则需要使用另外一种方式,把上面的代码改成如下面的的代码就可以有超出部分显示省略的效果。
p{ width:100px;//宽度 height:55px;//高度 border:1px solid red;//边框 overflow:hidden;//超出部分隐藏 display:-webkit-box;//设置盒子样式,-webkit-是兼容前缀 -webkit-box-orient:vertical;//设置盒子参考方式 -webkit-line-clamp:3;//设置超出多少行显示省略号}
效果:
阅读全文
0 0
- ellipsis单行文本和-webkit-box多行文本超出部分显示省略号
- 多行文本超出时显示省略号----jquery.ellipsis.js
- 单行文本与多行文本超出范围需要隐藏并显示省略号
- 关于单行、多行文本超出显示省略号... css
- css单行及多行文字超出部分显示省略号
- 文本溢出:单行文本,多行文本溢出显示省略号
- 文本显示省略号(单行文本+多行文本)
- 多行文本超出部分省略号代替
- 单行/多行文本溢出,显示省略号
- WebKit多行文本溢出显示省略号(...)
- 多行文字超出部分显示省略号
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
- 设置多行文本超出显示省略号,在手机端超出部分无法隐藏解决方法
- 实现文本单行显示,超出部分显示省略号(...)
- CSS 控制单行文本和多行文本的显示区域不够存放时使用省略号...来替代的做法
- 实现单行、多行文本自动隐藏及显示省略号
- css单行或多行文本溢出显示省略号
- 实现单行、多行文本自动隐藏及显示省略号
- VS2015编译CPU100%问题解决
- caffe学习日记--Lesson2:再看caffe的安装和使用、学习过程
- 百度地图经纬度在地图上体现
- Mac安装Appium环境问题
- Spring Boot 日志
- ellipsis单行文本和-webkit-box多行文本超出部分显示省略号
- JAVA 并发编程-线程创建(二)
- storm单机环境搭建
- centos7 lnmp YUM更新php
- dropout的解释
- 百度地图 java.lang.UnsatisfiedLinkError 问题解决
- 信号的捕捉&模拟实现sleep
- 影响网站关键词排名效果的因素总结_搜索引擎算法汇总
- redis详解——简单介绍和linux下的安装和jedis使用(一)