想要实现文字超出部分以省略号的形式显示首先需要给此元素设置一个宽度，然后添加以下属性

overflow: hidden;/*内容超出后隐藏*/

text-overflow: ellipsis;/*超出部分以省略号显示*/

white-space: nowrap;/*文本不进行换行*/

显示结果就是这样

点击查看多行显示隐藏的解决方法

css 超出部分以省略号的形式显示的更多相关文章

  1. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  2. CSS常用字体属性(多出的文本隐藏，或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性：background-origin和background-clip

    (一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-famil ...

  3. css超出内容以省略号显示

    控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or ...

  4. css 超出宽度出现省略号

    display: block; overflow: hidden; width: 260px; white-space: nowrap; text-overflow: ellipsis;

  5. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  6. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  7. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  8. css 实现div内显示两行或三行，超出部分用省略号显示

    一.div内显示一行,超出部分用省略号显示 white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; 二.div内显示 ...

  9. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

随机推荐

  1. Could not parse UiSelector argument: 'XXX' is not a string 错误解决办法

    ebDriverWait(driver,20).until(EC.visibility_of_element_located((MobileBy.ANDROID_UIAUTOMATOR,new UiS ...

  2. python的copy模块

    python的copy模块 概念 Python中的赋值语句不复制对象,它们在目标和对象之间建立索引,这就是浅复制.对于一些对象或者集合,我们有时需要一个副本,以便可以更改一个副本中的值而不改变其原对象 ...

  3. 除法保留小数bit位 + 四舍五入

    /*num1/num2 保留bit 位小数 , 四舍五入*/ #include<bits/stdc++.h> using namespace std; ]; int main() { in ...

  4. [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式

    [From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...

  5. follow up2-20190426

    406. Minimum Size Subarray 同向双指针 https://www.lintcode.com/problem/minimum-size-subarray-sum/descript ...

  6. 五、 OpenERP 输出日志

    import logging from openerp.osv import orm _logger = logging.getLogger(__name__) class project_task_ ...

  7. Hello Jexus(转并修改)

    一.关于 CentOS CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照 ...

  8. ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法

    1.ifram的使用 左边是<a>链接  右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...

  9. 《LeetBook》leetcode题解(6): ZigZag Conversion[E]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  10. 闲话handle和handler

    虽然handle和handler只有一个字符之差,但在计算机的世界里,含义却大相径庭. 1. 先说说handle 北京话说"一边儿玩儿去,玩勺子把儿去","勺子把儿&qu ...