本篇介绍的是小窗文字内容的排版，通过该篇文章可以让小伙伴们熟悉以下几个知识点:
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. 样例的完整文件：文字的排版