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如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
随机推荐
- python语法学习面向对象之继承
python语法学习面向对象之继承 转载自:http://www.cnblogs.com/Joans/archive/2012/11/09/2757368.html 只要涉及到面向对象,”类“是必须出 ...
- 1017 A除以B (20 分)
#include <iostream> #include <string> using namespace std; int main() { string num; int ...
- 1001 害死人不偿命的(3n+1)猜想 (15 分)
#include <iostream> using namespace std; int main(){ ; cin >> n; ){ != ) n = ( * n + ) / ...
- HDU - 1427 / UESTC - 1252 经典dfs
很好奇为什么hzwer那种稍改一下还是无法过样例,代码我没看出问题 换了一种用桶组合挑取两个数不断回溯的做法 这是HDU1427的代码,后者改一改就行了 #include<bits/stdc++ ...
- 文本编辑器 未完成 Treap
#include<bits/stdc++.h> using namespace std; const int maxn = 2e6+1e5; unsigned int SEED = 17; ...
- VBS常用脚本及其解说一览
取得本机IP strComputer = "." Set objWMIService = GetObject("winmgmts:\\" & strCo ...
- .Net支持Redis哨兵模式
csredis 博客 csRedisgit地址 csRedis3.2.1 Nuget地址 (在使用csredis3.2.1获取sentinel时产生运行时异常,调查问题最后发现是获取sentinel的 ...
- python爬虫之认识爬虫和爬虫原理
python爬虫之基础学习(一) 网络爬虫 网络爬虫也叫网络蜘蛛.网络机器人.如今属于数据的时代,信息采集变得尤为重要,可以想象单单依靠人力去采集,是一件无比艰辛和困难的事情.网络爬虫的产生就是代替人 ...
- Union Find - 20181102 - 20181105
Union Find: 589. Connecting Graph public class ConnectingGraph { //父节点数组 private int[] father = null ...
- CNN Advanced
from sys import path path.append('/home/ustcjing/models/tutorials/image/cifar10/') import cifar10,ci ...