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

最新推荐文章于 2021-11-10 15:07:14 发布

hello_ljfbest

最新推荐文章于 2021-11-10 15:07:14 发布

阅读量1.4k

点赞数 2

分类专栏： div/css 文章标签：语言算法 div table xhtml html

本文链接：https://blog.csdn.net/ljfbest/article/details/6848194

版权

div/css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上午想写文章竟然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。请参阅我编写的其他书目。

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

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行。这个必须有，不然的话亚洲语言会换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

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

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

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

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,也就是亚洲语言和非亚洲语言的一个区别挺让人头疼,下面介绍的是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>

hello_ljfbest

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一行内文本超出指定宽度溢出的处理

上午想写文章竟然unavailable service，连编辑也不能，写到了以前的博客上，现给转过来先说下几个css属性：1.white-space 属性设置如何处理元素内的空白。值描述normal默认。非亚洲语言遇到空白会换行。pre空白会被浏览器保留。其行为方式类似 HTML 中的标签。nowr
复制链接

扫一扫