css3 文字 超出显示 |ios css 滑动

1. ellipsis 末尾省略号

/* 单行文字 */
.ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 文字以省略号结尾 */
}
/* 多行文字 */
.multi-ellipsis {
display: -webkit-box; /* 将元素变成弹性伸缩盒子 */
-webkit-box-orient: vertical; /* 垂直排列 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 文字以省略号结尾 */
-webkit-line-clamp: 3; /* 限制行数 */
}

2. word-break 换行

/* 强制换行 */
.break-all {
word-break: break-all;
}
/* 非英文字符断行 */
.break-word {
word-break: break-word;
}

3. text-indent 缩进

/* 首行缩进 */
.text-indent {
text-indent: 2em;
}
/* 首行取消缩进 */
.text-no-indent {
text-indent: 0;
}

4. text-shadow 阴影

/* 文字阴影 */
.text-shadow {
text-shadow: 2px 2px 2px #666;
}

5. letter-spacing 字符间距

/* 字符间距 */
.letter-space {
letter-spacing: 2px;
}

以上这些方式都可以实现文字超出显示的效果，开发者可根据实际需求选择适合的方式进行使用。