html给文本换行,CSS长文本换行

在网页设计中，我们常常会发现文本在容器中的换行和我们理想的不一样，这导致不对齐溢出等不美观现象。那么我们怎么来控制长文本的换行呢？用CSS即可完成。

一、DIV、P等块级元素的换行控制

1、当我们定义一个区块的宽度时，文本到达宽度的时候会自动进行换行。例如：

2、在区块中连续的英文默认不会换行，我们用word-wrap:break-word;或word-break:break-all;实行强制换行(只在IE中有效)。

如果在#test中出现了连续的英文，你就会发现即使英文的宽度超出了200px，也不会自动换行，而会溢出区块。你可以使用

3、在firefox中word-wrap:break-word;或word-break:break-all;无效，我们只能为

块添加滚动条来实现这一情况了：

二、在表格table中的换行控制

1、为table添加table-layout: fixed;

2、为table中的td、th添加word-break: break-all;word-wrap:break-word;

不过上面的方法也只有在IE中有效。

3、firefox中，仍然需要用滚动隐藏的方法，为td、th添加overflow:hidden;

三、简单介绍white-space

white-space:normal|pre|nowrap

normal：默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre：换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

通过上面的这些方法，我们即可实现通过CSS长文本换行。同时，这几个CSS属性正确运用，也可以实现强制文本不换行的效果，不信你可以试试。

html给文本换行,CSS长文本换行相关推荐

【长文本处理】长文本划窗分割算法
长文本划窗切片算法给定一段长文本,对长文本进行滑动窗口,切成一系列更短的文本,其中切片后的最小文本长度和窗口滑动的步长作为参数,且切分后每段文本都是完整的句子.断句标点可自行限制范围. 这种切割方式 ...
clob类型类似MySQL_Oracle中大文本数据类型Clob 长文本类型（MySQL中不支持，使用的是text）Blob 二进制类型MySQL数据库Text...
Oracle中大文本数据类型 Clob 长文本类型 (MySQL中不支持,使用的是text) Blob 二进制类型 MySQL数据库 Text 长文本类型 TINYTEXT: 256 bytes TE ...
html h 不换行,css 强制不换行
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文作一新求抖直微圈 ...
【MySQL】mysql文本类型，长文本
text类型 tinytext : 可存储256字节文本数据,适合超短文本 text : 可存储64kb文本数据,适合短文本 mediumtext : 可存储16MB文本数据, 适合长文本 longt ...
长文本翻译-免费长文本翻译软件
长文本翻译,今天给大家分享一款免费的长文本翻译,我们为什么要选择这款好用的翻译器,因为汇集了世界最好的几个翻译平台(百度/谷歌/有道),第一点翻译质量高,选择性多.第二点支持各种语言互译,第三点可以各 ...
css怎么改颜色不换行,css a不换行怎么设置
css a不换行的设置方法:首先新建一个html文件,并使用a标签创建一个链接:然后给a标签添加一个id属性:接着通过id设置a标签的样式:最后将white-space属性设置为nowrap,实现文字 ...
html文本过长自动换行,css 长文本及长链接自动换行的几种方法
方法一:你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 方法二:强制不换行 div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本 ...
制作html如何换行,css如何强制换行？
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力:允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离:允许随意改变文本的大小写方式.修饰方式以及其他页面 ...
html中的li标签不换行,css li 不换行（布局，内容）
参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的不换行显示: * 将 li 设为 display ...

html给文本换行,CSS长文本换行

html给文本换行,CSS长文本换行相关推荐

最新文章

热门文章