本篇介绍的是小窗文字内容的排版，通过该篇文章可以让小伙伴们熟悉以下几个知识点:
word-space、overflow、text-overflow。
最终的展示效果如下:
参考步骤:
1. 建立html文档，并使用dl,dt,dd元素将内容放进去。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本排版</title> </head> <body> <dl> <dt>收藏新闻</dt> <dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd> <dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd> <dd>藏界|地产商谈收藏：跟拿地异曲同工拾垃圾的老外</dd> <dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd> </dl> </body> </html>
此时页面效果如下：
2. 添加CSS样式，设置dl的长度、宽度以及边框。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本排版</title> <style type="text/css"> dl{ width:300px; /*设置宽度*/ height:120px; /*设置长度*/ border:1px solid red; /*设置边框样式*/ } dt{ /*待补充*/ } dd{ /*待补充*/ } </style> </head> <body> <dl> <dt>收藏新闻</dt> <dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd> <dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd> <dd>藏界|地产商谈收藏：跟拿地异曲同工 拾垃圾的老外</dd> <dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd> </dl> </body> </html>
效果如下:
3. 分别设置dt,dd的字体的大小、颜色，以及其他属性，上下内容省略，只显示样式部分。
<style type="text/css"> dl{ width:300px; /*设置宽度*/ height:120px; /*设置长度*/ border:1px solid red; /*设置边框样式*/ } dt{ font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */ color:#71790c; /*设置文字颜色*/ } dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ } </style>
效果如下:
4. 设置正文内容中字体的格式为不换行，这里用到的属性是white-space.
<style type="text/css"> dl{ width:300px; /*设置宽度*/ height:120px; /*设置长度*/ border:1px solid red; /*设置边框样式*/ } dt{ font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */ color:#71790c; /*设置文字颜色*/ } dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/ line-height:20px; /*设置每行的高度*/ } </style>
效果如下:
5. 引入两张背景图片，分别用于设置标题栏的背景，以及正文内容的前面的小标题图标。
<style type="text/css"> dl{ width:300px; /*设置宽度*/ height:120px; /*设置长度*/ border:1px solid red; /*设置边框样式*/ } dt{ font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */ color:#71790c; /*设置文字颜色*/ background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/ } dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/ line-height:20px; /*设置每行的高度*/ background:url(img/icon.gif) no-repeat; /*设置内容的背景，不拉伸，此时图标在文字下面重叠的，需要调整*/ } </style>
效果如下:
6. 设置新闻标题(dt)的上右下左边距、行高以及外边框。
dt{ font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */ color:#71790c; /*设置文字颜色*/ background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/ padding:2px 2px 2px 10px; /*设置标题的上右下左的边距*/ line-height:25px; /*设置标题的行高为25px*/ border:1px solid #efefef; /*添加标题的边框*/ }
效果如下:
7. 现在开始处理正文内容(dd)的样式，调整正文内容的样式，使被遮住的背景图标显示出来。
dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/ line-height:20px; /*设置每行的高度*/ background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，添加背景图的位置为靠左，并且距离上边距为45% */ padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/ margin-left:10px; /*调整外边框的左边距10px */ margin-top:2px; /*调整外边框的上边距为2px*/ }
效果如下:
8. 现在开始处理超出边框范围的字体。
dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/ line-height:20px; /*设置每行的高度*/ background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，不拉伸，此时图标在本字下面重叠的，需要调整*/ padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/ margin-left:10px; /*调整外边框的左边距10px */ margin-top:2px; /*调整外边框的上边距为2px*/ overflow:hidden; /* 将超出边框范围的文字内容隐藏*/ text-overflow:ellipsis; /*将超长的部分以...形式显示*/ }
最终显示效果如下:
9. 完整的html代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本排版</title> <style type="text/css"> dl{ width:300px; /*设置宽度*/ height:120px; /*设置长度*/ border:1px solid red; /*设置边框样式*/ } dt{ font:bold 13px "宋体"; /*设置字体粗体，大小13px,宋体字 */ color:#71790c; /*设置文字颜色*/ background:url(img/green.gif) repeat-x; /*设置标题的背景,并且以横坐标X轴铺满*/ padding:2px 2px 2px 10px; /*设置标题的上右下左的边距*/ line-height:25px; /*设置标题的行高为25px*/ border:1px solid #efefef; /*添加标题的边框*/ } dd{ font:13px "宋体"; /*设置字体大小13px,宋体字 */ white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/ line-height:20px; /*设置每行的高度*/ background:url(img/icon.gif) no-repeat left 45%; /*设置内容的背景，不拉伸，此时图标在本字下面重叠的，需要调整*/ padding-left:20px; /*调整内边框左边距离为20px，这样背景图片就显示出来。*/ margin-left:10px; /*调整外边框的左边距10px */ margin-top:2px; /*调整外边框的上边距为2px*/ overflow:hidden; /* 将超出边框范围的文字内容隐藏*/ text-overflow:ellipsis; /*将超长的部分以...形式显示*/ } </style> </head> <body> <dl> <dt>收藏新闻</dt> <dd>钱币|5盎司彩银虎币价值几何 三连8豹子钞市值达千元 </dd> <dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd> <dd>藏界|地产商谈收藏：跟拿地异曲同工 拾垃圾的老外</dd> <dd>轶闻|最潮兵马俑亮相西安 藏友发现日军内参书籍</dd> </dl> </body> </html>
10. 样例的完整文件：文字的排版