不友好的例子

image.png

正确例子

image.png

CSS部分

	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;

解析

  • overflow:hidden;
    • 对超出尺寸进行裁切,也就是隐藏溢出(这个比较好理解,不做解释)
    • 清除浮动:
  • text-overflow:ellipsis;
    • 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。
  • white-space:nowrap;
    • 规定段落中的文本不进行换行:

PS: Dom最好提前设定好宽度

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

脸朝大海, 春暖花开 ----江大脸