在网页设计中，CSS（层叠样式表）是一种强大的工具，用于控制网页元素的样式、布局和呈现。本文主要讨论了三种使用CSS创建竖排文字的方法。这些方法各有优缺点，适用于不同的场景。
1. **使用`<br>`标签**：
这是最简单也是最不推荐的方法。通过在每个字母后面添加`<br>`标签，可以强制文本换行，从而实现竖排效果。例如，将"NETTUTS"拆分成单独的字母并分别放在`<br>`标签后。然而，这种方法的缺点非常明显，它不仅导致HTML代码变得冗余，而且不利于维护和扩展。此外，如果文本内容改变，需要手动修改所有`<br>`标签，非常不便。
2. **静态包裹方法**：
这种方法涉及将每个字母包裹在单独的`<span>`元素中，然后通过CSS设置`display`属性为`block`，使得每个`span`元素占据一整行。例如，`<span>N</span><span>E</span>`等。这种方法的优点是可以直接在CSS中控制每个字母的样式，但缺点是需要手动处理每个字母，对于动态生成的内容，这种方法将变得极其繁琐。
3. **使用JavaScript动态添加`<span>`**：
为了解决静态包裹方法中的问题，可以使用JavaScript动态地为每个字母添加`<span>`标签。获取`<h1>`元素，然后遍历其文本内容，将每个字母用`<span>`包裹。这种方法避免了手动添加`<span>`的麻烦，但依赖于JavaScript，如果用户禁用了JavaScript，布局可能会被破坏。
在实际应用中，更推荐使用CSS3的`writing-mode`属性或者`transform: rotate()`方法来实现竖排文字，它们更加灵活且不依赖JavaScript。
**使用`writing-mode`属性**：
CSS3的`writing-mode`属性允许你改变文本的书写方向。例如，`writing-mode: vertical-rl;`可以让文本从右向左垂直排列。这种方法对浏览器的支持较好，且不需要额外的HTML结构。
```css
.vertical-text {
writing-mode: vertical-rl;
}
```
**使用`transform: rotate()`**：
另一种方法是通过`transform`属性将文本旋转90度，使其看起来像是垂直排列。这通常与`display: inline-block;`结合使用，以确保每个字符独立排列。
```css
.rotated-text {
transform: rotate(-90deg);
display: inline-block;
white-space: nowrap;
}
```
在选择方法时，应考虑兼容性、可维护性和代码简洁性。对于静态内容，`writing-mode`可能是最佳选择；而对于动态内容，可以结合JavaScript来实现。无论选择哪种方法，确保在实现功能的同时，也要注重代码的可读性和可维护性。
