一、单行文本截字

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. 【NLP_Stanford课堂】正则表达式

    或者 [Ww]oods,方括号里的是或的关系,符合其一即被提出.用来匹配单个字符 [A-Z]:表示所有的大写字母之一 [a-z]:表示所有的小写字母之一 [0-9]:表示所有的0-9的数字之一 否定: ...

  2. windows网络命令汇总

    分类: 网络技术2011-10-26 09:43 2557人阅读 评论(0) 收藏 举报 windows网络路由器dns服务器internetinterface Ping命令: ping命令通过发送I ...

  3. 关于main函数的参数,argc,argv的内部机制

    偶尔对main函数的参数感兴趣,写了个程序验证. int main(int argc,char **argv) 首先,解释两点: 第一 .系统将参数列表,即我们在shell下输入的命令,存储到一个一维 ...

  4. spring boot拦截器配置

    1.在spring boot配置文件application.properties中添加要拦截的链接 com.url.interceptor=/user/test 2.编写拦截器代码 ,创建UrlInt ...

  5. Facet constraits error: Spring 4.1 requires Java 1.6 or newer.

    问题来源: 在高版本的myeclipse,同步低版本的myeclipse提交的项目,可能会出现配置不一致. 问题描述: spring4.1不支持jdk1.6 注:在下载项目到本地的时候,myeclip ...

  6. jQuery插件编写步骤详解

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  7. 第一次使用Git

    这次的作业是关于GIT的,一开始我并不知道GIT是啥,百度了一下才知道Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds ...

  8. SQL的id奇迹

    SELECT id,name FROM test where name is null and id>=26 limit 26,3 这里26和26没关系,不是id额

  9. Android(java)学习笔记4:线程的控制

    1. 线程休眠: Java中线程休眠指让正在运行的线程暂停执行一段时间,进入阻塞状态,通过调用Thread类的静态方法sleep得以实现. 当线程调用sleep进入阻塞状态后,在其休眠的时间内,该线程 ...

  10. Release模式下无法调试打印对象的解决方式

    之前碰到在release模式下无法打印对象的问题,只能切换到debug模式下调试, xcode release 模式下, 会关掉断点读取变量的上下文环境,以提高运行速度, ⚠️ 记得调试完再改回去,防 ...