1、新建一个html文件，命名为test.html。
2、在test.html文件内，创建一个包含文字的div，并设置div的class属性为content，主要用于对div进行css样式设置。
3、在test.html文件内，对类名为content的div进行样式设置，代码如下。
4、在css内，设置div的宽度为130px，同时设置其浮动向左，居左对齐。
5、在css内，设置div内的文字不换行，当文字超过宽度width时，隐藏文字。
6、在css内，设置div内文字超过宽度时，以点点点代替文字显示。
使用一段css代码：”word-wrap: break-wordword-break: break-alloverflow: hidden“。
实例演示如下：
1、设计两个容器，放入一些文字，代码如下：
此时的页面展示如下：（均为换行）
2、修改两个容器的样式，给第一个容器加上了关键代码如下：
此时的页面展示（第一个已经换行）：
扩展资料：
css详解：
一、word-wrap: normal|break-word（word-wrap 属性允许长单词或 URL 地址换行到下一行）。
1、normal ，只在允许的断字点换行（浏览器保持默认处理，默认值）。
2、break-word， 在长单词或 URL 地址内部进行换行。
二、word-break: normal|break-all|keep-all（通过使用 word-break 属性，可以让浏览器实现在任意位置的换行）。
1、normal 使用浏览器默认的换行规则。（默认值）
2、break-all 允许在单词内换行。
3、keep-all 只能在半角空格或连字符处换行。
前提是要固定宽度，如下
<li style="width:50px overflow:hiddenwhite-space:nowraptext-overflow:ellipsis">如何设置CSS样式使网页中过长的新闻标题后面以省略号显示</li>
而在样式中加上 overflow:hiddenwhite-space:nowraptext-overflow:ellipsis这段代码的意思是超出50px的长度后，后面以省略号显示。
