display:block/*内联对象需加*/
width:31em
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden一起使用。*/
一般的文字截断(适用于内联与块):
.text-overflow {
display:block/*内联对象需加*/
width:31em
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden一起使用。*/
}
可以通过设置宽度来实现隐藏多余的图片,但是不建议这样做。1、开发网站过程中需要使用的图片都是美工提前处理,遇到不合适的需要使用Photoshop进行裁剪操作,不适合使用代码来处理图片。
2、过大或者不合适的图片容易造成浏览器的兼容问题或者维护不便,另外也影响占用带宽。