CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示

Css代码超出省略…

单行显示省略

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

Css代码多行超出省略…

overflow: hidden;
/* text-overflow: ellipsis; */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

Flex两端对齐

   display: flex;
  flex-direction: row;
  justify-content: space-between;

一行超出多行居中显示

 .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素之间的间距 */
}

.box {
  width: calc(33.33% - 10px); /* 每个元素的宽度为1/3减去间距 */
  height: 100px; /* 每个元素的高度，可以根据需要设置 */
  background-color: #ccc; /* 每个元素的背景色 */
}

align-content: flex-start;通过设置其属性控制上下间距