首页 > 其他分享 >div、td 、p 等容器内强制换行和不换行的方法

div、td 、p 等容器内强制换行和不换行的方法

时间:2023-02-11 15:47:18浏览次数:52  
标签:word normal 换行 break td 文本 div

转载自:http://www.divcss5.com/html/h50327.shtml

1、强制不换行,同时以省略号结尾。

<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</div>

2、css自动换行

div{ word-wrap: break-word; word-break: normal; } 

3、css强制英文单词断行

div{word-break:break-all;} 

若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的div宽,和 white-spance:nowrap即可。 

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行 

它们的区别就在于: 

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。 

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。 

3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 

WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。 

如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。 

word-break : normal | break-all | keep-all 

参数: 

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: 

word-wrap : normal | break-word 

参数: 

normal :  允许内容顶开指定的容器边界 

break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。 

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。 

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用来代替,不然不能正确换行。

标签:word,normal,换行,break,td,文本,div
From: https://www.cnblogs.com/gyh907368/p/17111782.html

相关文章

  • Codeforces Round #851 (Div. 2) A-E
    比赛链接A题意给一串只包含\(1,2\)的数,找到最小的\(k\)使得\(\prod_{i=1}^ka_i=\prod_{i=k+1}^na_i\)。题解知识点:枚举。因为只有\(1,2\),所以考虑左右两......
  • Codeforces Round #541 (Div. 2) D - Gourmet choice 差分约束
    观察到n+m最多才2000个点,正解也不是差分约束但是它能跑:)建图比较平凡不记述难得的是用链式前向星T了,改vector过了  T9的话是加了随机化优化,cin读入,链式前向星存边......
  • Codeforces Round #851 (Div. 2)
    A.OneandTwo比较两边\(2\)的个数即可。#include<bits/stdc++.h>usingnamespacestd;intn,T,prefix[1111],suffix[1111],ans,a[1111];intmain(){sc......
  • 2.10 Codeforces Round #851 (Div. 2)
    A-OneandTwo题意给出长度为n的序列a,a中元素是1或2找到一个k使a1*a2*a3*....*ak=ak+1*ak+2*ak+3*...*an思路统计序列中有多少个2,若是奇数个2,则......
  • antd-vue 框架的日期选择选年份
    <a-date-picker:placeholder="placeholder"mode="year"format="YYYY":open="showYear"v-model="valueYear"@openChange="changeOpen"@panelChange="panelC......
  • c++17区域锁std::scoped_lock
    template<class...MutexTypes>classscoped_lock;(sincec++17)作用同时持有一个或多个Mutex的RAII机制的mutex包装器,可以一次性获取多个mutex,避免发生死锁。当......
  • 代码不要冗余之道-TDD三定律
    提问什么是TDD三定律回答定律一、在编写不能通过的单元测试前,不可编译生产代码。定律二、只可编写刚好无法通过的单元测试,不能编译也算不过。定律三、只可编写刚好足......
  • Codeforces Round #851 (Div. 2) 题解
    CodeforcesRound#851(Div.2)题解A.OneandTwo取\(\log_2\),变成加号,前缀和枚举\(s[i]=\dfrac{s[n]}{2}\)。B.SumofTwoNumbers对于每一位,如果是偶数则平均......
  • Codeforces Round #717 (Div. 2)
    D:连续区间内lcm=积也就是gcd=1所以可以分解质因子对每个数先找到它后面离他最近的有相同质因子的数的位置用桶更新然后考虑怎么快速弄出整个区间因为划分是固......
  • antd/Form在setFieldsValue 后偶现在 getFieldsValue 的时候数据丢失
    问题setFieldsValue偶现在getFieldsValue的时候数据丢失。分析1、目前的问题是在渲染的过程中getFiledValue被改变了,那么谁会改变这个值呢?数据中有个appeal......