Resumen de estilos generales de CSS
1. Saltos de línea CSS en estilo chino e inglés
p {
/* 两边对齐 */
text-align: justify;
/* normal-默认 break-all-允许在单词内换行 keep-all在半角空格或连字符处换行 */
word-break: normal;
/* normal-允许内容顶开或溢出指定的容器边界 break-word内容再边界内换行 */
overflow-wrap: break-word;
/* CSS3中将 word-wrap 改名为 overflow-wrap，同时都设置作向前兼容 */
word-wrap: break-word;
/* hyphens 换行时显示连字符连接单词，谷歌和IE不支持，火狐支持 */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
2. Diseño flexible de elementos centrados en la parte superior, inferior, izquierda y derecha.
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Diseño absolutamente posicionado
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. Más de n líneas de texto muestran puntos suspensivos
.overflow-style {
overflow: hidden;
text-overflow:ellipsis;
// white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置了2行
line-height: 18px;
}
4. Diseño de estilo de barra de desplazamiento deslizante del navegador
// 谷歌浏览器滚动条样式
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(231, 231, 231, 0.5);
border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ececec;
-webkit-box-shadow: inset 0 0 6px rgba(34, 153, 250, 0.5);
box-shadow: inset 0 0 6px rgba(34, 153, 250, 0.1);
}
// ::-webkit-scrollbar-thumb:window-inactive {
// background: rgba(255, 0, 0, 0.4);
// }
// 火狐浏览器滚动条样式
* {
scrollbar-color: #ececec #f7f7f9; /* 滑块颜色 滚动条背景颜色 */
scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}
5. Cálculo de estilo
div {
width: calc(100vw - 20px);
height: calc(100vh - 20px);
}