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

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. Machine learning 第7周编程作业 SVM

    1.Gaussian Kernel function sim = gaussianKernel(x1, x2, sigma) %RBFKERNEL returns a radial basis fun ...

  2. 【算法笔记】A1022 Digital Library

    题意 输入n本书的信息:id,书名,作者,关键字,出版社,出版年份.搜索图书,输出id. 思路 定义5个map<string, set<int> >,分别存放Title, Au ...

  3. 【Alpha】Phylab 展示博客

    目录 Phylab Alpha 展示博客 一.团队简介 二.项目目标 2.1 典型用户 2.2 功能描述 2.3 用户量 三.项目发布与展示 3.1 新功能 3.2 修复缺陷 3.3 问题与限制 3. ...

  4. 2018徐州网络赛 - Trace

    题意:n个左下角为原点右上角在第一象限的矩形不断覆盖,求最后形成的图形的周长 x和y是独立的,分别维护两棵线段树,一棵表示x坐标下最大的y值,另一棵表示y坐标下最大的x值 从覆盖的角度来考虑,如果逆序 ...

  5. [性能测试]：记录一次性能测试，nmon文件收集工具的小问题

    问题:今天发现nmon文件分析成excel后,用<NMON抽取结果.excel>无法抓取到数据 解决过程:1,认为是nmon分析文件<nmon analyser v33g.xls&g ...

  6. Mac 10.12安装专业抓包工具Wireshark

    说明:专业到不太会用. 下载: (链接: https://pan.baidu.com/s/1c570YE 密码: pkmr)

  7. 从setTimeout谈js运行机制

    众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执行完才能有机会执行,不像人一 ...

  8. IDEA里如何多种方式打jar包，然后上传到集群

    关于IDEA里如何多种方式打jar包,然后上传到集群的问题? 前期准备,就是在,IDEA里,maven来创建项目.这里不多赘述. 1)用maven项目来打包,我推荐这个. (强烈推荐,简单又快速) S ...

  9. 断开所有远程连接（sql server）

    DECLARE @d VARCHAR(8000) SET @d = ' ' SELECT @d = @d + ' kill ' + CAST(spid AS VARCHAR) + CHAR(13)FR ...

  10. 微服务Kong（三）——添加一个API

    在开始前,请确保您已经安装了KONG服务,并且已经启动了KONG服务. 在本节中,您可以学习到:如何在KONG层添加一个API.这是您使用KONG来管理您的API的第一步.对于此篇教程,我们将使用 h ...