css文本截字,超出文本省略号显示
一、单行文本截字
- p {
- text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/
- white-space: nowrap;/*空白处理方式 不换行*/
- overflow: hidden;/*溢出隐藏*/
- }
效果:
二、多行文本截字
- p{
- display:-webkit-box;/*设置盒子为弹性盒容器*/
- -webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/
- -webkit-line-clamp:;/*显示两行*/
- text-overflow:ellipsis;/*用省略号代替才建的文字*/
- overflow:hidden;/*溢出隐藏*/
- /*若为纯字母、数字,需要加上下面这句*/
- word-break:break-all;
- }
效果
css文本截字,超出文本省略号显示的更多相关文章
- android开发之当设置textview多少字后以省略号显示。限制TextView的字数
设置多少字后以省略号显示 <TextView android:id="@+id/tv" android:layout_width="wrap_conten ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- 翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- 文本太长,用省略号显示的css样式
——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- css 文字展示两行 其余的省略号显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5--div、span超出部分省略号显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
随机推荐
- python 多线程效果演示
多线程演示 不使用多线程的情况 import threading import time def run(n): print("task ",n) time.sleep(2) ru ...
- 编译时提示软件包 javax.servlet.http 不存在 import javax.servlet.http.HttpServletRequest;
编译时错误:软件包 javax.servlet.http 不存在import javax.servlet.http.HttpServletRequest; 解决办法:把servlet-api.jar加 ...
- App后台开发架构实践笔记
1 App后台入门 1.1 App后台的功能 (1)远程存储数据: (2)消息中转. 1.2 App后台架构 架构设计的流程 (1) 根据App的设计,梳理出App的业务流程: (2) 把每个业务流程 ...
- xshell里的一些配色方案
只需要把下面的代码复制到记事本中,保存为xcs文件格式,然后在xshell中导入选中就可以换配色方案了,可以自己修改下面的代码 [ubuntu]text(bold)=ffffffmagenta(bol ...
- sqlserver学习2---java执行存储过程
一.存储过程 1.新增操作存储过程 --------------1.新建 增加学生的存储过程---------------------------- set IDENTITY_INSERT stude ...
- 再学UML-Bug管理系统UML2.0建模实例(一)
1.项目概述 随着软件项目规模和复杂性的增大,有效跟踪和管理项目中存在的缺陷Bug变得越来越重要.每一个软件企业都需要妥善处理软件中的缺陷,这将直接关系到软件过程质量与软件产品质量,但并非 ...
- Struts2学习-拦截器
1.新建项目user4,建立好和user3一样的目录,与之相比只是添加几个类,主要是struts.xml和action类的改变,其结果没有太大的变化 struts,xml <?xml versi ...
- numpy cheat sheet
numpy cheat sheet https://files.cnblogs.com/files/lion-zheng/Numpy_Python_Cheat_Sheet.pdf
- apache ab 测试 apr_socket_connect(): 由于目标机器积极拒绝 无法连接
遇到这种情况一般是你开的并行数量太多了...例如:ab -c 1000 -n 10000 http://localhost/index.html 如此大的请求就会挂掉,不过还是有补救措施的,可以通过增 ...
- 解决Could not get lock /var/cache/apt/archives/lock
在ubuntu apt-get upgrade的时候,遇到: E: Could not get lock /var/cache/ apt/archives/lock - open (11 Resour ...