展会信息港展会大全

CSS 强制自动换行实例 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:14:58   浏览:2540次  

导读:由于各处字符的编码不同,我们在div时会出来如果是全英文或数字时就会撑开div哦,这样实在是不好看,正面是我google搜索到的内容,有需要的朋友参考一下。CSS设置强制换行: word...

由于各处字符的编码不同,我们在div时会出来如果是全英文或数字时就会撑开div哦,这样实在是不好看,正面是我google搜索到的内容,有需要的朋友参考一下。

CSS设置强制换行:

word-break:break-all 强制断开实现转行

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

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

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

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

代码如下

复制代码

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css

#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

代码如下

复制代码

#wrap{word-break:break-all; width:200px;}

或者

#wrap{word-wrap:break-word; width:200px;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:可以实现换行

2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

代码如下

复制代码

#wrap{word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

实例

代码如下

复制代码

<style type="text/css">

.AutoNewline

{

word-break: break-all;/*必须*/

}

</style>

<table>

<tr>

<td class="AutoNewline">行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td>

</tr>

</table>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港