1、只显示一行，超出部分用省略号

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

2、只显示两行(或多行)，超出部分用省略号

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    // 控制行数

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

CSS文本超过两行用省略号代替的更多相关文章

  1. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  2. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  3. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  4. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  5. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  7. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  8. CSS文本溢出，显示省略号（...）

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  9. css 文本超出范围显示省略号

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

随机推荐

  1. 通过java打开jar 文件

    JAR文件是许多信息经过封装后形成的捆绑体.也就是一个压缩文件. JAR 文件格式提供了许多优势和功能,其中很多是传统的压缩格式如ZIP或者RAR所没有提供的,JAR文件 还用于安排和封装库.组件和插 ...

  2. 组合数学起步-排队[HNOI2012][BZOJ2729]

    <题面> 这个题十分基础 写这个博客给自己看的呵呵 遇到这个题,一看就是组合数学, so,开始推公式, 刚开始想的是,先排男生,再排女生,最后排老师 推了一会,呃呃呃,情况复杂,考虑的好像 ...

  3. NLTK的探索

    import nltk import random from nltk.corpus import movie_reviews documents = [(list(movie_reviews.wor ...

  4. HR招聘_(五)_招聘方法论（电话邀约）

    .主动候选人 这部分候选人通过职位广告直接投递,大多对公司意愿度高(排除少数海投候选人),所以电话中一般需要了解如下信息: 目前状态,在职还是离职: 离职原因以及真实诉求: 岗位职责和团队情况: 薪资 ...

  5. DOM 创建元素 删除元素（结点）

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  6. 【django后端分离】Django Rest Framework之一般配置（简单剖析）

    1:常设状态码 200 OK - [GET]:服务器成功返回用户请求的数据,该操作是幂等的(Idempotent). 201 CREATED - [POST/PUT/PATCH]:用户新建或修改数据成 ...

  7. ENSP 安装后，启动路由器提示错误41

    ENSP 安装后,启动路由器提示错误41 环境: 安装的软件清单: VirtualBox-5.2.28-130011-Win.exe WinPcap_4_1_3.exe Wireshark-x64-3 ...

  8. 【水滴石穿】React Native 组件之SafeAreaView

    本文转载自:https://blog.csdn.net/xiangzhihong8/article/details/80692792 SafeAreaView简介 ReactNative官方从0.50 ...

  9. input的表单验证(不断更新中~~)

    1 手机号验证 <input type="tel" id="phone" name="phone" placeholder=" ...

  10. RapidMiner Studio 入门

    http://docs.rapidminer.com/studio/getting-started/ RapidMiner Studio 入门 FEIFEI MA 2015-12-07RAPIDMIN ...