利用css实现带有省略号的段落
带有省略号的段落就是你只能在一行显示一段文字,文字过长是肯定不能完全显示的,如果默认的话,超出的文字会自动换行,撑大盒子。
1.这时需要设置white-space: nowrap,禁止换行。这样的话,文字就会在一行显示
2.在一行显示就会有超出的部分,使用overflow: hidden将超出的部分隐藏。
3.虽然隐藏了,但是有可能最后一个字被挡住一部分,而且我们需要的是省略号,这时再加上text-overflow: ellipsis;就可以将最后改成省略号。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
利用css实现带有省略号的段落的更多相关文章
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用css的border实现画三角形思路原理
1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
随机推荐
- oracle入坑日记<六>自增列创建和清除(含序列和触发器的基础用法)
0 前言 用过 SQLserver 和 MySQL 的自增列(auto_increment),然而 Oracle 在建表设置列时却没有自增列. 查阅资料后发现 Oracle 的自增列需要手动编写. ...
- 用python进行有进度条的圆周率计算
一.安装tqdm函数库 tqdm是一个强大的终端进度条工具,我利用pip获取tqdm函数库. 1.打开运行,输入“cmd” 2.2:输入pip install 你要安装的库(如 pip insta ...
- (22/24) webpack实战技巧:静态资源集中输出
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...
- js:一些基础
JavaScript 基础(一) JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <h ...
- Java解法-两数相加(Add Two Numbers)
问题 给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和. ...
- wireshark抓包新手使用教程
wireshark是非常流行的网络封包分析软件,可以截取各种网络数据包,并显示数据包详细信息.常用于开发测试过程各种问题定位. Wireshark软件安装 软件下载路径:wireshark官网.按照系 ...
- conda国内源的设置 by dwSun
conda国内源的设置 by dwSun anaconda是一个balabalabala... 知道这个软件的人肯定不用介绍,不知道的也不必介绍. conda是anaconda的包管理器,通过cond ...
- AlphaGo的前世今生(一)Deep Q Network and Game Search Tree:Road to AI Revolution
这一个专题将会是有关AlphaGo的前世今生以及其带来的AI革命,总共分成三节.本人水平有限,如有错误还望指正.如需转载,须征得本人同意. Road to AI Revolution(通往AI革命之路 ...
- SSRS表达式里引用.net dll
在SSRS的表达式里使用了一个.NET的DLL,用来生成条码图片,发布以后用不了. 需要修改一个SSRS的权限配置项,确保Report_Expressions_Default_Permissions的 ...
- cent os安装filebeat
先贴一下官方文档https://www.elastic.co/guide/en/beats/filebeat/6.6/filebeat-installation.html 我本次使用rpm的方式安装, ...