typeboost.css 是一款专注于排版的 CSS 框架，它提供了多种排版效果，如垂直居中、文本断行、字体调整等，使得前端开发者能够轻松实现各种美观的排版效果。
安装与使用
使用 npm 安装 typeboost.css：
npm install typeboost.css
在 HTML 中引入 typeboost.css：
<link rel="stylesheet" href="node_modules/typeboost.css/dist/typeboost.min.css">
安装完成后，即可开始使用 typeboost.css 提供的排版样式。
垂直居中
我们经常会遇到需要将一个元素垂直居中的情况。typeboost.css 提供了两种方法实现元素的垂直居中。
方法 1：flex
可以将父元素设置为 flex 容器，并使用 align-items: center 实现元素的垂直居中。
<div class="parent"> <div class="child">这是要垂直居中的元素</div> </div>
.parent {
display: flex;
align-items: center;
}方法 2：transform
通过设置子元素的 position 为 absolute，并将 top 和 left 都设置为 50%，再通过 transform 将元素向上移动自身高度的一半即可实现垂直居中。
<div class="parent"> <div class="child">这是要垂直居中的元素</div> </div>
-- -------------------- ---- ------- ------- - --------- --------- - ------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
文本断行
当文本内容超过容器宽度时，我们通常需要将其进行断行处理。typeboost.css 提供了 break-word 和 word-wrap 两种方式实现文本的断行。
方法 1：break-word
使用 word-break: break-word 可以在单词内部进行断行。
<div class="container"> 这是一段非常长的文本，可能会超出容器宽度。 </div>
.container {
word-break: break-word;
}方法 2：word-wrap
使用 overflow-wrap: break-word 可以在单词之间进行断行。
<div class="container"> 这是一段非常长的文本，可能会超出容器宽度。 </div>
.container {
overflow-wrap: break-word;
}字体调整
根据设计稿的要求，我们需要对不同的文本进行字体大小的调整。typeboost.css 提供了多种字体大小的样式类，可以快速地对文本进行调整。
字体大小
使用 .tb-font-size-{size} 样式类可以快速调整文本的字体大小，其中 {size} 可以是 xs、sm、md、lg、xl、2xl、3xl、4xl、5xl 等多种尺寸。
<div class="container"> <p class="tb-font-size-lg">这是一段大号字体的文本。</p> <p class="tb-font-size-sm">这是一段小号字体的文本。</p> </div>
行高
使用 .tb-line-height-{height} 样式类可以快速调整文本的行高，其中 {height} 可以是 tight、snug、normal、relaxed、loose 等多种高度。
<div class="container"> <p class="tb-line-height-loose">这是一段行距比较宽松的文本。</p > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/39093) ，转载请注明来源 [https://www.javascriptcn.com/post/39093](https://www.javascriptcn.com/post/39093)