CSS垂直居中的七个方法
好看的滚动条样式
vue中使用v-html使得文字内容宽度自适应，定固定最小、最大值，高度固定。文字超出使用省略号
关键点1： ::v-deep
<div class="h_content" v-html="item.description" ></div>
.h_content ::v-deep p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 13;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
margin: 0px !important;
}
`display: -webkit-box;` 将容器的显示模式设置为以弹性盒子（flex box）为基础的布局方式。
`-webkit-box-orient: vertical;` 设置弹性盒子内的子元素垂直堆叠排列。
`-webkit-line-clamp: 13;` 设置文本行数的限制为13行。超过限制行数的内容将被隐藏。
`overflow: hidden;` 设置超出限制行数的内容隐藏，不显示在容器内。
`text-overflow: ellipsis;` 当文本被截断时，用省略号表示被隐藏的文本部分。
`box-sizing: border-box;` 设置盒模型为border-box模式，宽度和高度属性包括内边距和边框在内，不会影响元素内容区域（即实际显示的部分）的大小。
.h_content {
width: max-content;
max-width: 500px;
min-width: -webkit-fill-available;
height: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
`width: max-content;` 将容器的宽度设置为足够容纳内容的最大宽度。这会使容器的宽度根据内容自动伸缩。
`max-width: 500px;` 设置容器的最大宽度为500像素。即使内容超过了这个宽度，容器的宽度也不会超过这个限制。
`min-width: -webkit-fill-available;` 使用 `-webkit-fill-available` 值设置容器的最小宽度。`-webkit-fill-available` 会让容器尽可能填充父容器的可用宽度。
`height: 400px;` 设置容器的固定高度为400像素。
`overflow: hidden;` 设置超出容器尺寸的内容隐藏，不显示在容器内。
`text-overflow: ellipsis;` 当文本被截断时，用省略号表示被隐藏的文本部分。这通常在容器宽度不足以完全显示文本时使用。
效果
方式二，非vue中使用v-html
-webkit-box-orient: vertical;
width: fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
max-width: 500px;
min-width: 100px;
height: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
- `-webkit-box-orient: vertical;`：将元素内容的布局设置为垂直方向排列。
- `width: fit-content;`：根据元素的内容自动调整宽度，使元素的宽度恰好适应内容。
- `width: -webkit-fit-content;`：根据元素的内容自动调整宽度，使元素的宽度恰好适应内容（适用于WebKit浏览器）。
- `width: -moz-fit-content;`：根据元素的内容自动调整宽度，使元素的宽度恰好适应内容（适用于Mozilla Firefox浏览器）。
- `max-width: 500px;`：设置元素的最大宽度为500px。
- `min-width: 100px;`：设置元素的最小宽度为100px。
- `height: 400px;`：设置元素的固定高度为400px。
- `overflow: hidden;`：隐藏超出元素框的内容。
- `text-overflow: ellipsis;`：当文本超出元素宽度时，显示省略号以表示被裁剪的内容。
- `white-space: normal;`：允许文本正常换行。
