Question

我很难为我的彩带找到一些漂亮的垂直文字。

正如您在链接上看到的那样 http://madbogen.com/

第一个功能区在图像上打印了一些白色文本。有没有可能通过CSS实现这一目标的方法？或者，如果我只根据它所说的标题标记a-tag就足够了 - 我正在考虑搜索等等？

我希望在不使用标题的情况下达到同样的效果，这样我就可以摆脱悬停色带时出现的小盒子。

提前致谢

Answer 1

您可以使用<br />标签将它们粘贴到单独的行上，如下所示：

<div>
<span>H <br />E <br />L <br />L <br />O <br />! <br />
</span>

在这里演示：

http://jsfiddle.net/QSByU/497/

或者您可以将每个字母包装在span标签中，如下所示：

<h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

在这里演示： http://jsfiddle.net/QSByU/498/

您可以使用许多其他方法使文字垂直显示（请参阅http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284）。

Answer 2

谢谢你们。我查看了tutsplus网站，发现字母间距和自动换行是我需要的。

color: white;
font-size: 16px;
word-wrap: break-word;
text-align: center;
padding-left: 15px;
padding-top: 45px;
letter-spacing: 28px;
text-decoration: none;
line-height: 105%;
font-style: normal;
font-family: "Times New Roman";

链接中带有CSS的垂直文本

2 个答案: