需要三句话。

1
2
3

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

解释一下。第一句是说文字显示不换行，第二句说溢出部分隐藏，第三局说溢出时显示省略号。
所以能够实现以上功能。

问题：我们现在有很多图像，它们大小不一但是大致相似。我们需要保持图像的宽度一致，按照css的默认设置，图像会保持原始比例，那么图像的高度会有区别，在网页排版时因为有高有低会出现空白的地方。我们需要解决的问题就是把所有图像设为同样的比例，比如16:9.

解决方法：我们可以给img外面套一层框架，设置框架的宽高比并隐藏溢出部分，代码如下：

1
2
3
4
5
6

div.image-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

然后html里可以这样使用：

1
2
3

<div class="image-container">
  <img src="img_src">
</div>