今天早上早些时候，我需要为我正在处理的项目创建垂直文本。在尝试了几个想法之后，现分享给大家！
方法1：<br>标签
因此，实现垂直文本的一种可能（尽管不推荐）方法是<br>在每个字母后添加标签。
<h1> V <br />E <br />R <br />T <br />I <br />C <br />A <br />L </h1> |
不要使用这种方法。这是蹩脚和马虎的。
See the Pen Using br Tags by Envato Tuts+ (@tutsplus) on CodePen.
方法2：静态包装
使用这种方法，我们将每个字母包装在一个跨度中，然后在我们的 CSS 中display设置它。block
|
这个解决方案的问题——除了可怕的标记——是它是一个手动过程。如果文本是从 CMS 动态生成的，那么您就不走运了。不要使用这种方法。
See the Pen Static Wrapping by Envato Tuts+ (@tutsplus) on CodePen.
方法3：使用 JavaScript
我最初的直觉是span使用 JavaScript 动态添加标签。这样，我们就绕过了方法二中提到的问题。
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> h1 span { display: block; } </style> </head> <body> <h1> VERTICAL </h1> <script> var h1 = document.getElementsByTagName('h1')[0]; h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>'; </script> </body> </html> |
这种方法绝对是一种改进。上面，我们split将文本放入一个数组，然后将每个字母包装在一个 span. 虽然我们可以使用for语句之类的东西，或者$.map过滤数组，但更好更快的解决方案是同时手动连接和换行文本。
See the Pen Using JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
虽然更好，但不推荐使用此解决方案。而且，这里有两个原因。
如果禁用 JavaScript，这会破坏您的布局吗？
理想情况下，如果可能的话，我们应该使用 CSS 来完成这项任务。
方法4：对容器应用宽度
如果可以的话，让我们远离 JavaScript。如果我们对容器元素应用宽度，并强制文本换行怎么办？那可以工作。
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> h1 { width: 50px; font-size: 50px; word-wrap: break-word; } </style> </head> <body> <h1> VERTICAL </h1> </body> </html> |
在这种情况下，我们将非常窄的宽度应用于h1标签，然后使其font-size等于该精确值。最后，通过设置word-wrap等于break-word，我们可以强制每个字母单独一行。但是，word-wrap: break-word它是 CSS3 规范的一部分，并非在所有浏览器中都兼容。
排除较旧的浏览器，这似乎解决了我们的问题……但并非完全。上面的演示似乎确实有效，但使用像素值太冒险了。让我们尝试一些简单的事情，比如将大写字母变成小写字母。
See the Pen Using CSS by Envato Tuts+ (@tutsplus) on CodePen.
方法5：申请letter-spacing
作为预防措施，并扩展方法四，我们为什么不应用相当大letter-spacing的方法来解决这个问题？
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; /* Set large letter-spacing as precaution */ } </style> </head> <body> <h1> VERTICAL </h1> </body> </html> |
这似乎解决了这个问题，不过，我们再次在这里使用了一些 CSS3。
See the Pen Using Letter Spacing by Envato Tuts+ (@tutsplus) on CodePen.
方法6：使用em
或者，有一个单线解决方案。还记得我们知道应用overflow: hidden到父元素会奇迹般地让它包含它的浮动吗？这个方法有点像！关键是使用em, 并在每个字母之间放置一个空格。
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> h1 { width: 1em; font-size: 40px; letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */ } </style> </head> <body> <h1> V E R T I C A L </h1> </body> </html> |
很整洁，对吧？而且，通过这种方式，您可以应用所需的任何字体大小。因为我们正在使用em ——它等于x-height所选字体的 ——所以我们提供了更多的灵活性。
但是，再一次，有时不止一个字母会出现在一行中。你必须是安全的；这就是为什么我应用任意大letter-spacing以确保一行中的字母不超过一个。
据我目前所知，这是最好的、最符合跨浏览器的解决方案。
See the Pen Using em by Envato Tuts+ (@tutsplus) on CodePen.
方法7：Whitespace
实现此效果的最后一种方法是利用该white-space属性。
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> h1 { white-space: pre; } </style> </head> <body> <h1> V E R T I C A L </h1> </body> </html> |
通过设置 white-space 为 pre，这指示文本的行为就像它在 pre 标签内一样。因此，它尊重您添加的任何间距。
See the Pen Using Whitespace by Envato Tuts+ (@tutsplus) on CodePen.
方法8：使用writing-mode
我们的下一个方法是镇上最新的方法之一。我们有一个writing-mode在 css 中调用的属性来帮助我们编写垂直文本。
配对writing-mode，text-orientation将帮助您实现这一目标。所做的是writing-mode改变文本的书写方向。您可以从水平、从上到下（嗯，这是书写模式的默认选项）、从右到左或从左到右垂直更改方向。这就是整个写作方向变得多么简单。如果在古代浏览器中可以看到应用程序，您需要小心。因为，该属性在旧版浏览器中不可用。如果您想writing-mode在旧版浏览器中工作，请添加以下内容：
水平从上到下：writing-mode: lr
垂直从右到左：writing-mode: tb-rl
垂直从上到下：writing-mode: tb-lr
接下来，我们选择改变字符的方向。这是text-orientation财产变得有用的地方。有三个选项可供选择：和mixed，其中是默认设置。 uprightsidewaysmixed
See the Pen Using Writing-Mode by Envato Tuts+ (@tutsplus) on CodePen.
方法9：使用变换
最后，如果上述所有与现代浏览器兼容的解决方案都失败了，让我们处理一个时髦的替代方案。如果由于某种原因而 write-mode 不起作用，您可以利用 transform: rotate(90deg) 属性。这将顺时针方向旋转文本。当然，如果您想让文本向另一个方向旋转，请使其旋转（-90 度）。
不可否认，这种方法极其不方便。您当然拥有所有其他选项，可以垂直翻转文本。
See the Pen Using transform by Envato Tuts+ (@tutsplus) on CodePen.
结论
曾经有几天，开发人员思考是否应该有一个 CSS3 规则来完成这项任务？如果我可以按照以下方式设置一些东西会怎样： font-display: letter-block; 它会指示每个字母被呈现为某种块？好吧，现在您可以选择writing-mode和text-orientation来实现垂直文本。
17854113671
发表评论