字符串强制换行与超出区域大小后的隐藏

    最近做项目遇到一个问题，就是从数据库得到的数据放入页面后，超出显示区域的大小，一开始时使用的是在后台对数据的个数进行截取，但是由于英文字母与汉字的差别，页面很不美观。后来在在网上查找发现了一些方法，但是仍需改进，经过不断尝试得到了想要的结果：

<div style=" height:15px; width:200px; white-space:nowrap;text-overflow:ellipsis; overflow:hidden">内容<div>

 

 

上面的图片就是效果，第一行的第三个字段内容，‘据警方介绍，这辆...’是从数据库里直接读的（在数据库中字段内容很长的），无需做任何修改或处理。

     white-space:nowrap;   nowrap: 强制文本在一行,除非遇到br换行标签

     text-overflow:ellipsis;   当文本超过容器,自动截取并加上省略号（Firefox不可用）

     overflow：hidden;    当文本超过容器,自动隐藏