一、单行文本截字

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文本截字,超出文本省略号显示的更多相关文章

  1. android开发之当设置textview多少字后以省略号显示。限制TextView的字数

    设置多少字后以省略号显示 <TextView    android:id="@+id/tv"   android:layout_width="wrap_conten ...

  2. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  3. 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...

  4. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  5. 文本太长,用省略号显示的css样式

    ——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...

  6. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  7. css 文字展示两行 其余的省略号显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. HTML5--div、span超出部分省略号显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 微信小程序 实现多行文字 超出部分省略号显示

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

随机推荐

  1. js实现base64编码与解码(原生js)

    一直以来很多人使用到 JavaScript 进行 base64 编码解码时都是使用的 Base64.js,但事实上,浏览器很早就原生支持 base64 的编码与解码了 以前的方式 编码: <ja ...

  2. libxml的使用 编辑节点

    libxml读取的基本功能已经介绍过了,现在将介绍libxml编写的基本功能. 编写操作包含节点的添加,删除和修改. 对于添加,我们需要调用xmlNewTextChild函数来添加节点,需要xmlNe ...

  3. python入门1 python手动编译py_compile,compileall

    python运行之后会自动生产pyc文件,也可以手动编译生成pyc文件.代码如下: #coding:utf-8 """ 2018-11-03 dinghanhua 手动编 ...

  4. SpringCloud实战4-Hystrix线程隔离&请求缓存&请求合并

    接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...

  5. 数据结构学习-数组A[m+n]中依次存放两个线性表(a1,a2···am),(b1,b2···bn),将两个顺序表位置互换

    将数组中的两个顺序表位置互换,即将(b1,b2···bn)放到(a1,a2···am)前边. 解法一: 将数组中的全部元素(a1,a2,···am,b1,b2,···bn)原地逆置为(bn,bn-1, ...

  6. sql语句更新某字段内容中部分数据

    使用到的sql 语句的关键字就是replace, 如下图,把带有zhangjun 的值替换成 user 使用的sql语句就是 update 表名 set 字段名=replace(字段名,‘替换字符内容 ...

  7. Django:模板系统

    一,常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二,常量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊 ...

  8. LG3690 【【模板】Link Cut Tree (动态树)】

    题目 终于去写\(LCT\)了 这个大爷讲的挺好的 板子 #include<algorithm> #include<iostream> #include<cstring& ...

  9. Maven Dependencies missing jar 解决

    在导入SVN项目之后发现Maven里面的pom.xml报错. 发现是Maven Dependencies 里面的jar包不完整. 我试过手动加入jar,但是不能成功,然后就又试着添加dependecn ...

  10. Android学习笔记_24_多媒体MediaPlayer对象之音乐播放器与SoundPool声音池

    一.MediaPlayer对象常用方法介绍: MediaPlayer mediaPlayer = new MediaPlayer(); if (mediaPlayer.isPlaying()) { m ...