CSS3控制单行文本的溢出
text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。语法:
但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:
同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。语法:
normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。
CSS3控制单行文本的溢出的更多相关文章
- css控制单行文本溢出
1.溢出属性(容器的) overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会成现在元素框之外: hidd ...
- css3实现单行文本溢出显示省略号
文本超出一定宽度让其隐藏,以省略号替代 width:200px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 如下图
- CSS3单行文本两端对齐
CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- css单行文本及多行文本溢出显示省略号
关于文本溢出的相关属性: 1. text-overflow: clip|ellipsis|string; 该属性规定当文本溢出包含元素时发生的事情. clip : 修剪文本. ellipsis : ...
- css单行文本和多行文本溢出实现省略号显示
1.单行文本溢出 文本内容 <div class="singleLine"> HelloWorldHelloWorldHelloWorldHelloWorldHello ...
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
随机推荐
- CentOS7 配置 nginx php php-fpm
上一篇说到安装 php 装完并没有任何设置,这篇记录一下设置.先设置 nginx 吧,nginx 网上多如繁星的设置但大都比较简单,属于基础设置,因此此处只贴出设置后的结果,用红色框表示一些自己改动或 ...
- Angular 组件 mat-paginator 自定义详细用法
Demo: https://stackblitz.com/edit/angular-5mgfxh?file=main.ts 官方文档: https://material.angular.io/comp ...
- 【算法笔记】B1023 组个最小数
1023 组个最小数 (20 分) 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 ...
- POJ3322 Bloxorz I 无脑广搜(我死了。。。)
多测不清空,爆零两行泪....我死了QWQ 每个节点3个状态:横坐标,纵坐标,和方向 说一下方向:0:立着,1:竖着躺着,上半部分在(x,y),2:横着躺着,左半部分在(x,y) 然后就有了常量数组: ...
- 【mysql】count(*),count(1)与count(column)区别
https://blog.csdn.net/lzm18064126848/article/details/50491956 count(*)对行的数目进行计算,包含NULL count(column) ...
- Tomcat SSL证书安装配置
[From Internet] 首先找到安装Tomcat 目录下该文件“Server.xml”,一般默认路径都是在Conf 文件夹中.然后用文本编辑器打开该文件,接着找到 <Connector ...
- 【研究】Struts2-048漏洞
1.1 漏洞背景 2017年7月7日,Apache Struts发布最新的安全公告,Apache Struts2-strus1-plugin插件存在远程代码执行的高危漏洞,漏洞编号为CVE-2017- ...
- PIE SDK热力图
1.算法功能简介 热力图,也就热图或者热点图,它能以特殊高亮的的形式显示某一区域的等级的优越性.重要性或者某一区域类别的密度和变换趋势:例如百度地图热力图 是用不同颜色的区块叠加在地图上实时描述人 ...
- PIE SDK与Matlab结合说明文档
1.功能简介 Matlab是三大数学软件之一,它在数学类科技应用软件中在数值计算方面首屈一指.Matlab可以进行矩阵运算.绘制函数和数据.实现算法.创建用户界面.连接其他编程语言的程序等,主要应用于 ...
- android主线程ActivityThread
ActivityThread在Android中它就代表了Android的主线程,但是并不是一个Thread类. 源码如下: http://androidxref.com/6.0.0_r1/xref/f ...