像在 Excel 中一样在 HTML 中垂直排列文本答案

【问题标题】：Orient text vertically in HTML like in Excel像在 Excel 中一样在 HTML 中垂直排列文本
【发布时间】：2010-12-14 09:09:21
【问题描述】：

我正在尝试在 HTML 中复制 Excel 的垂直文本功能，并想知道是否有人尝试过此操作或知道执行此操作的简单方法？

我希望我的文字看起来像：

我

<th> 元素内部

【问题讨论】：

唯一想到的就是 T
H
I
S 但你肯定不是这个意思吗？
不，如果可能的话，我更愿意重新定位文本

标签： html css vertical-alignment

【解决方案1】：

你可以试试this。与使用 <br />

相比，可以更好地控制间距

来自网站：

CSS：

#vertical {
  width:15em; 
  padding:0;
  margin:0 auto; 
  list-style-type:none; 
  font-size:1.4em; 
  font-family:georgia, "times new roman", serif;
  }
#vertical li {
  float:left; 
  border:0.2em solid #eee;
  margin:0.1em;
  }
#vertical li a {
  text-decoration:none; 
  color:#000; 
  display:block; 
  width:1.5em; 
  height:1.5em; 
  border-top:0.1em solid #000; 
  height:auto;
  }
#vertical li a em {
  font-style:normal; 
  display:block; 
  text-align:center; 
  background:#fff; 
  border-left:0.1em solid #000; 
  border-right:0.1em solid #000;
  }
#vertical li a em.nd {
  border-bottom:0.1em solid #000;
  }
#vertical li a:hover {
  background:#eee;
  }
#vertical li a:hover em {
  background:#eee; 
  color:#800;
  }

还有标记：

<ul id="vertical">
  <li>
    <a href="../menu/index.html">
      <em>D</em><em>E</em><em>M</em>
      <em>O</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../menus/index.html">
      <em>M</em><em>E</em><em>N</em>
      <em>U</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../layouts/index.html">
      <em>L</em><em>A</em><em>Y</em><em>O</em>
      <em>U</em><em>T</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../boxes/index.html">
      <em>B</em><em>O</em><em>X</em>
      <em>E</em><em class="nd">S</em>
    </a>
  </li>
  <li>
    <a href="../mozilla/index.html">
      <em>M</em><em>O</em><em>Z</em><em>I</em>
      <em>L</em><em>L</em><em class="nd">A</em>
    </a>
  </li>
  <li>
    <a href="../ie/index.html">
      <em>E</em><em>X</em><em>P</em><em>L</em>
      <em>O</em><em>R</em><em>E</em><em class="nd">R</em>
    </a>
  </li>
  <li>
    <a href="../opacity/index.html">
      <em>O</em><em>P</em><em>A</em><em>C</em>
      <em>I</em><em>T</em><em class="nd">Y</em>
    </a>
  </li>
</ul>

【讨论】：

漂亮的解决方案，在与“#vertical li a”选择器关联的样式中发现了一个多余的属性：有两个“高度”属性......看起来原作者正在玩弄东西忘了删除他们原来的“身高：1.5em”。

【解决方案2】：

仅 IE 解决方案：

<div style="writing-mode:tb-rl;filter: flipv fliph;">
    The Vertical Text
</div>

你可以对标签尝试同样的事情。

【讨论】：