# :first-letter
:first-letter (opens new window) 选择器用于设置文本首字母的样式，注意这个元素得是块级的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
font-weight: bold;
font-size: 20px;
}
span:first-letter {
color: red;
}
</style>
</head>
<body>
<span>¥88</span>
</body>
</html>
效果如下：
# text-transform
text-transform (opens new window) CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-transform</title>
<style>
.p1 {
text-transform: capitalize;
}
.p2 {
text-transform: uppercase;
}
.p3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<p class="p1">首字母大写： hello world</p>
<p class="p2">大写字母：hello world</p>
<p class="p3">小写字母：HELLO WORLD</p>
</body>
</html>
效果如下：
# word-spacing
word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格，则该属性无效。下面代码设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word-spacing</title>
<style>
p {
word-spacing: 20px;
}
</style>
</head>
<body>
<p>有空格的效果：你好呀，我的宝宝</p>
<p>没有空格的效果：你好呀，我的 宝宝</p>
</body>
</html>
效果如下：
# 单行溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
/* 超出部分隐藏 */
overflow: hidden;
/* 禁止换行 */
white-space: nowrap;
/* 省略号 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
</body>
</html>
效果如下：
# 多行文本溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行溢出显示省略号</title>
<style>
div {
width: 200px;
overflow: hidden;
display: -webkit-box;
/* 从顶部向底部垂直布置子元素 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
/* 将 块容器 中的内容限制为指定的行数. 它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果 */
-webkit-line-clamp: 2;
/* 允许在单词内换行，让英文换行 */
word-break: break-all;
}
</style>
</head>
<body>
<div>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
<div>lassjdlfasjdflkasjdlfkajsdlkfajsldkjfalksdjflaksjdflasjdlfkjalsdkf</div>
</body>
</html>
效果如下：
上面我们实现了多行文本的换行，是不是很简单，但是呢，这种实现方式存在兼容问题，只适用于 webkit 内核的浏览器，一般用于移动端开发效果还是不错的。如果使用过程中出现了兼容问题，我们可以使用 JS 来实现上面的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
width: 200px;
line-height: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
const contentData = '白日依山尽，黄河入海流。欲穷千里目，更上一层楼。'
multiline(content, 2, contentData)
function multiline(el, row, str) {
const computedStyle = document.defaultView.getComputedStyle(el, null)
const lineHeight = computedStyle.lineHeight
const contentHeight = row * parseInt(lineHeight)
let i = 0
if (el.offsetHeight == 0 || (el.offsetHeight > contentHeight)) {
el.innerHTML = ''
let tempStr = ''
while (el.offsetHeight <= contentHeight) {
tempStr = str.substring(0, i + 1);
i++;
el.innerHTML = tempStr
}
el.innerHTML = str.substring(0, tempStr.length - 2) + '...';
el.height = contentHeight
}
}
</script>
</body>
</html>
效果如下：
上面我们通过 JS 实现了多行文本显示省略号的的功能，代码代码也不复杂