css换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用,强制换行
4. white-space:nowrap; 强制不换行,都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码:
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/
多行溢出显示省略号
.elip2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意,一定要指定容器的宽度,不然的话是没有用的。
注意word-break 是IE5+专有属性
语法:
word-break : normal | break-all | keep-all
参数:
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
注意,兼容火狐浏览器强制英文换行:
数据表操作:https://www.cnblogs.com/fjl0418/p/7929420.html
弹性盒子:https://www.runoob.com/w3cnote/flex-grammar.html
<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文内容</div>
css换行的更多相关文章
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
- CSS换行:word-wrap、word-break和text-wrap差别
一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保 ...
- css换行用省略号代替
css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象 ...
- 网页中的CSS换行控制
在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: whit ...
- CSS换行1
1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束 ...
- CSS 换行知多少: word-wrap && word-break && white-space && word-spacing
word-wrap : 首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆: Referenc ...
- CSS换行知识
换行规则 CSS可以指定文字多行时换行的规则,说白了就是指定哪些地方可以换行 相关属性 word-break The word-break CSS property sets whether line ...
- CSS换行文本溢出显示省略号,多行
首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...
随机推荐
- Oracle 查询两个时间段内的所有日期列表
1.查询某时间段内日期列表 select level,to_char(to_date('2013-12-31','yyyy-mm-dd')+level-1,'yyyy-mm-dd') as date_ ...
- gauss——seidel迭代
转载:https://blog.csdn.net/wangxiaojun911/article/details/6890282 Gauss–Seidelmethod 对应于形如Ax = b的方程(A为 ...
- JAVA web 使用有盟推送总结
仔细阅读文档,下边的都是废话. 为了省事,iOS和Android 提供了所有了参数,需要那个了修改传参. //ios actionURL为自定义参数 $.ajax({ type : "POS ...
- 了解AutoCAD对象层次结构 —— 5 —— 块表
为了清楚的了解块表的组成内容,让我们利用MgdDbg工具查看一下块表中的块表记录.在开始页面,以无样板模式新建一个.dwg文件(图 4‑7(1)),这样的话,默认的块表记录只有3条(图 4‑7(2)) ...
- 进入jsp页面的6种方法
1.sendRedirect重定向,效率低,发送一个状态码,然后让浏览器去请求这个地址,显示最新的url值 2.forword转发,效率高,服务器访问目标url,然后把url的响应内容读取过来,在发送 ...
- BZOJ4519[Cqoi2016]不同的最小割——最小割树+map
题目描述 学过图论的同学都知道最小割的概念:对于一个图,某个对图中结点的划分将图中所有结点分成 两个部分,如果结点s,t不在同一个部分中,则称这个划分是关于s,t的割.对于带权图来说,将 所有顶点处在 ...
- Codeforces Round #426 Div. 1
A:考虑每个质因子,显然要求次数之和是3的倍数,且次数之差的两倍不小于较小的次数.对于第一个要求,乘起来看开三次方是否是整数即可.第二个取gcd,两个数分别除掉gcd,之后看两个数的剩余部分是否都能被 ...
- Python_sys.argv 命令行参数获取使用方法
import sys print(sys.argv) """ 获取命令行参数 输入 python3 sys.argv_demo.py 输出: ['argv.py'] 输入 ...
- Hdoj 1160.FatMouse's Speed 题解
Problem Description FatMouse believes that the fatter a mouse is, the faster it runs. To disprove th ...
- Hdoj 1176.免费馅饼 题解
Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...