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

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. jpetStore 学习总结(1)

    最近学习了Springmvc4,对官方的例子jpetStore进行了分析研究,在官方网站下载spring-framework-2.5.6.SEC03,其中samples文件夹里就有jpetstore的 ...

  2. 2. C++11 构造函数相关

    1. 继承构造函数 派生类如果要使用基类的成员函数,可以通过using声明来完成. #include <iostream> using namespace std; class Base ...

  3. fiddler安装和使用

    App抓包原理 客户端向服务器发起HTTPS请求 抓包工具拦截客户端的请求,伪装成客户端向服务器进行请求 服务器向客户端(实际上是抓包工具)返回服务器的CA证书 抓包工具拦截服务器的响应,获取服务器证 ...

  4. json对象和数组

    Json数据就是格式化的字符串.c#中如果做为参数调用,类型就是string.1.Json数组 方括号[{ "firstName":"John" , " ...

  5. DB2 命令大全

    check Archiving processing 查看日志归档情况 db2 "SELECT DATE(CAST(START_TIME as TIMESTAMP)) as DATE, co ...

  6. (转)Python数学函数

    原文:https://www.cnblogs.com/lpl1/p/7793645.html PYTHON-基础-内置函数小结----------http://www.wklken.me/posts/ ...

  7. ES6 rest参数和扩展运算符

    rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...

  8. Linux Ubuntu系统下Java开发环境搭建

    操作系统:Linux x64 / Ubuntu 14.04 Java JDK版本:jdk-8u65-linux-x64.tar.gz 声明:转载请注明出处及本文链接 1. 前往ORACLE官网下载最新 ...

  9. 透析ARP原理

    对于ARP协议, 我本来是不了解的,只是解决了两个ARP相关的P2的Bug后,也就懂了.本文将从原理的角度对ARP做一个透析. 1. 什么是ARP? ARP(Address Resolution Pr ...

  10. SpringCloud - 2. 服务注册 和 发现

    SpringCloud 的服务注册和发现是由Eureka来完成. 1.eureka server 1.1 依赖 <dependency> <groupId>org.spring ...