css3 换行 省略号

CSS3是网页设计中不可或缺的重要技术之一。而其中的换行和省略号效果，更是让网页设计师们受益匪浅。

/* 换行 */
.wrap {
  word-wrap: break-word;
  overflow-wrap: break-word; /* 兼容旧版浏览器 */
}

/* 省略号 */
.ellipsis {
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

关于换行的效果，我们可以通过使用word-wrap和overflow-wrap这两个属性来进行设置，这样就可以让长的文本内容在超出容器宽度时自动换行，避免出现横向滚动条。

而对于一些需要用到省略号的地方，我们可以使用下面的样式，white-space: Nowrap;可以让文本不自动换行，overflow: hidden;则可以让超出容器宽度的文本隐藏，text-overflow: ellipsis;可以让最后的文本显示省略号。

无论是换行还是省略号，都能优化页面的显示效果，提高用户体验，所以我们在进行网页设计时，一定要掌握这些基础技术。