一行内文本超出指定宽度溢出的处理

lianxiangbus

浏览: 527654 次

最近访客更多访客>>

Franciswmf

u012363178

jinjian1985go

jacket233

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (985)

社区版块

存档分类

2012-03 ( 63)
2012-02 ( 107)
2012-01 ( 64)
更多存档...

上午想写文章竟然unavailable service，连编辑也不能，写到了以前的博客上，现给转过来

先说下几个css属性：

1.white-space 属性设置如何处理元素内的空白。

值描述

normal	默认。非亚洲语言遇到空白会换行。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

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

normal :　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行也就是说非亚洲语言之间不会换行，而亚洲语言达到某些条件限制条件（比说如表格，div宽度固定）则会换行
break-all :　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

另写一篇文章介绍这个属性

3.table-layout :auto|fixed
auto :　默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :　固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

设置或检索表格的布局算法。表格的宽度

4text-overflow :clip|ellipsis

clip :　不显示省略标记（...），而是简单的裁切

ellipsis :　当对象内文本溢出时显示省略标记（...）
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

对应的脚本特性为textOverflow。请参阅我编写的其他书目。

一般的文字截断（适用于内联与块）：

　　对于表格文字溢出的定义：

　　需要你注重的是，这个东东只对单行的文字的效，假如你想把它用在多行上，也只有第一行有作用的。

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,也就是亚洲语言和非亚洲语言的一个区别挺让人头疼,下面介绍的是CSS如何实现换行的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE \ word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE \ word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF \ table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>

分享到：