方法和详细的操作步骤如下：
1、第一步，打开html编辑器并创建一个新的html文件，例如：index.html，见下图，转到下面的步骤。
2、第二步，完成上述步骤后，在index.html中的<style>标记中，输入CSS代码，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，浏览器运行index.html页面。
如果此时文本超过2行，则多余的部分将自动显示为省略号，见下图。这样，就解决了这个问题了。
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到，两种方法可以实现：一是用程序开截取字符长度，二是用样式来做。
css样式如下：
[css]
.css1{
color:#6699ffborder:1px #ff8000 dashed
margin-bottom:20px
width: 20em/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden/*自动隐藏文字*/
text-overflow: ellipsis/*文字隐藏后添加省略号*/
white-space: nowrap/*强制不换行*/
width: 20em/*不允许出现半汉字截断*/
color:#6699ffborder:1px #ff8000 dashed
}
[/css]
html代码如下：
[html]
<div class="css1">Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
<div class="css2">Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
[/html]
<st这yle type=”text/css”>
.css1{
color:#6699ffborder:1px #ff8000 dashed
margin-bottom:20px
width: 20em/*不允许出现半汉字截断*/
}
.css2 {
overflow: hidden/*自动隐藏文字*/
text-overflow: ellipsis/*文字隐藏后添加省略号*/
white-space: nowrap/*强制不换行*/
width: 20em/*不允许出现半汉字截断*/
color:#6699ffborder:1px #ff8000 dashed
}
</style>
<div class=”css1″>Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
<div class=”css2″>Web前端开发 _ 专注于网站前端设计与Web用户体验</div>
