溢出隐藏

注意 同个div元素设置为flex布局会影响到text-overflow: ellipsis;(省略标记)

原理-> https://blog.csdn.net/tangran0526/article/details/103315302

    <!-- 溢出隐藏 -->
    <div class="hiding-style">
      hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-hszz-
    </div>

• 单行

.hiding-style {
  width: 100px;
  background-color: seagreen;

  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 规定文本不进行换行 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记（...） */
}

image.png

2. 单行或者多行

.hiding-style {
  width: 100px;
  background-color: seagreen;

  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记（...） */
  word-break: break-all; /* 允许在单词内换行 */
  /*word-break: keep-all;*/ /* 只能在半角空格或连字符处换行 */
  display: -webkit-box; /* 弹性伸缩盒 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子元素排列方式 默认是水平的，当值设为vertical时为垂直排列 */ 
  -webkit-line-clamp: 3; /* 用于显示的行数 */ 
}

word-break: break-all; /* 允许在单词内换行 */ word-break: keep-all; /* 只能在半角空格或连字符处换行 */