一、单行文本截字

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. 【Mood-15】DailyBuild 1月

    keywords: AsyncImageLoader universal-image-loader 2015-01-07 AsyncImageLoader:异步动态加载网络图片  类似listview ...

  2. html 表格单元格的宽度和高度的设置

    做网页的时候,经常会碰到表格宽度对不齐的问题.详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1.table中的width和height设置及其作用:table中设置的he ...

  3. 对 Canal (增量数据订阅与消费)的理解

    概述 canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费,目前主要支持了MySQL(也支持mariaDB). 起源:早期,阿里巴巴B2B公司 ...

  4. What is linux symbolic link

    Question :What is linux symbolic link In computing, a symbolic link (also symlink or soft link) is a ...

  5. 小组Scrum第一次冲刺

    团队任务描述: 在确定完分组,并对于敏捷开发做了相应的了解之后,我们团队开始了第一次的冲刺.对于我们团队的第一次的 Scrum冲刺,我们团队开展了团队会议.首先,我们明确了我们的目标,对其进行了相对初 ...

  6. 转载:em(倍)与px的区别

    转载出处:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理 ...

  7. LightOJ-1028 Trailing Zeroes (I)---因子数目

    题目链接: https://cn.vjudge.net/problem/LightOJ-1028 题目大意: 一个十进制数1≤n≤1012,现在用base进制来表示,问有多少种表示方法使得最后一位上的 ...

  8. public class Promise<T>: Thenable, CatchMixin

    public class Promise<T>: Thenable, CatchMixin

  9. HASH JION AND NESTED JION

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sssbbbryj/article/details/27795905  关于HASH_JION的原 ...

  10. gluon 实现多层感知机MLP分类FashionMNIST

    from mxnet import gluon,init from mxnet.gluon import loss as gloss, nn from mxnet.gluon import data ...