一枚努力学习前端的程序媛，之前都在自己的博客： Study Of Toast (breadfruit.github.io)(国内站点 上打卡，现在是到了第15期了，每周阅读刷刷。

长内容

单行文本截断

如果我们期望文本不换行，文本溢出时省略号表示溢出。

.wrapper {
  width: 300px;
  height: 20px;
  background-color:turquoise;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行文本截断

如果我们期望文本可换行，当超过n行时其余溢出的内容用省略号表示溢出。 -webkit-line-clamp表示行数 -webkit-box-orient表示盒子方向

.container {
    width: 300px;
    background-color: pink;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

对于长单词"人机"换行

对于比较长的单词进行断行

.horizontal {
    width: 200px;
    height: 50px;
    background-color :rgb(193, 211, 176);
    overflow-x: auto;
    overflow-wrap: break-word;
}

短内容

可以设置min-width防止内容太短时，显示很紧凑

.minMatin {
  min-width: 40px;
  padding: 3px;
  background-color: rgb(182, 182, 236);
  border: 0px solid transparent;
}

在flex布局中固定盒子使用省略号表示文本溢出的时候，尽管我们用了overflow: hidden,但是还是会出现内容弹出盒子的情况。

虽然默认的min-width值为0，但是在flexbox的子元素中，min-width的值是auto。这会使块元素占用比预期更多的空间，甚至在小屏幕上会将容器拉伸到屏幕边缘之外。