如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

Posted 2023-03-05

技术标签:

【中文标题】如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小【英文标题】：how to rotate text left 90 degree and cell size is adjusted according to text in html 【发布时间】：2013-03-26 06:35:25 【问题描述】：

假设我有一些行和列的表格，所以我想旋转单元格中的文本，如下所示：

问题是当我使用样式旋转文本时：

#rotate 
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

这一切都搞砸了

html代码：

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id='rotate'>10kg</td>
        <td >B</td>
        <td >C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id='rotate'>20kg</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id='rotate'>30kg</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>


</table>

css：

<style type="text/css">
td 
    border-collapse:collapse;
    border: 1px black solid;

tr:nth-of-type(5) td:nth-of-type(1) 
    visibility: hidden;

#rotate 
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

</style>

【问题讨论】：

@Mr_Green: transform: rotate(-90.0deg);我已经在我的代码中添加了它，但没有改变。我可以知道它是做什么用的吗？ Creating html table with vertically oriented text as table header 的可能重复项 【参考方案1】：

您可以通过将旋转 CSS 应用到内部元素，然后调整元素的高度以匹配其宽度，因为该元素已旋转以适应 <td>。

还要确保将 id #rotate 更改为一个类，因为你有多个。

$(document).ready(function() 
  $('.rotate').css('height', $('.rotate').width());
);

td 
  border-collapse: collapse;
  border: 1px black solid;

tr:nth-of-type(5) td:nth-of-type(1) 
  visibility: hidden;

.rotate 
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <div class='rotate'>10kg</div>
    </td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>20kg</div>
    </td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>30kg</div>
    </td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
  </tr>


</table>

JavaScript

在纯 javascript 中等价于上面的内容如下：

jsFiddle

window.addEventListener('load', function () 
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) 
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    
);

【讨论】：

请注意，值 0.083 表示 7.5 度，对于 IE10，您将需要 -ms-transform: rotate(-90.0deg); 这适用于短文本，但是当输入较长的文本时，td 的宽度会变大，并且无法缩小它:( +1 虽然适用于工作案例 @EduardLuca max-width 帮助，例如max-width: 1em，在 Chrome 上进行了测试——但单元格宽度只是长文本引入的问题之一。至少（1）断词和（2）定位/对齐会浮现在脑海中。 (1) 可以帮助使用不间断的字符，(2) 使用相对定位而不是 text-align esp。如果表格/单元格有些静态。然而，旋转远非理想，但在有限的情况下可能有用。现在尝试使列变大，并将文本居中 - 并且轰隆隆 - 布局在你的脸上爆炸！即使在 2015 年，您仍然必须通过为垂直文本编写通用图像处理程序来做到这一点……这太荒谬了。这不应该那么难。它应该像 lalala，不管出于什么愚蠢的原因，它都不是。第一个单元格是方形的。不是你想要的。【参考方案2】：

Daniel Imms 答案非常适合将 CSS 旋转应用于内部元素。但是，有可能以一种不需要 JavaScript 并且可以处理更长的文本字符串的方式来实现最终目标。

通常，在第一个表格列中使用垂直文本的全部原因是在较短的水平空间中放置一长行文本，并与高行内容（如您的示例）或多行内容（其中我将在此示例中使用）。

通过在父 TD 标签上使用“.rotate”类，我们不仅可以旋转内部 DIV，还可以在父 TD 标签上设置一些 CSS 属性，强制所有文本保持不变一行并保持宽度为1.5em。然后我们可以在内部 DIV 上使用一些负边距来确保它很好地居中。

td 
    border: 1px black solid;
    padding: 5px;

.rotate 
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;

.rotate div 
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
         margin-left: -10em;
         margin-right: -10em;

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td class='rotate' rowspan="4"><div>10 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>20 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
    <tr>
        <td class='rotate' rowspan="4"><div>30 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>
    
</table>

使用此解决方案要记住的一点是，如果行（或跨行）的高度比第一列中的垂直文本短，它效果不佳。如果您跨越多行或有大量内容创建高行，则效果最佳。

在jsFiddle 上玩得开心。

【讨论】：

请注意：为了安全起见，我将margin-left 和margin-right 的值从-10em 提高到-100em。如果您未旋转的文本宽度超过20em，则布局将开始更改。 OTOH，200em 文本的宽度太大而无法读取旋转 -90 度，因此应该足以避免遇到此问题。 ^^ 我上面的修复导致我的桌子下方有过多的空白，因为边距延伸得相当宽（或旋转后“高”）。为了解决这个问题，我将overflow: hidden 添加到旋转后的td。不适用于 IE11。您还应该添加 'transform' 和 '-ms-transform'【参考方案3】：

不幸的是，虽然我认为这些答案可能对我有用，但我一直在努力寻找解决方案，因为我在响应式表格中使用表格 - 在其中使用了 overflow-x。

因此，考虑到这一点，请查看此链接以获得更简洁的方式，它没有奇怪的宽度溢出问题。它最终对我有用，而且很容易实现。

https://css-tricks.com/rotated-table-column-headers/

【讨论】：

你能创建 90 度旋转的示例小提琴吗？【参考方案4】：

不计算高度。严格的 CSS 和 HTML。 <span/> 仅适用于 Chrome，因为 chrome 无法更改 <th/> 的文本方向。

th 

  vertical-align: bottom;
  text-align: center;


th span 

  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;

<table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table>

【讨论】：

这非常狡猾而且非常健壮。好主意，应该是公认的答案 - 没有 JS，没有特殊的宽度、高度、边距等 hacks - 非常好。为了更好的效果，你可以额外使用th spandisplay:table; border-spacin:0; margin-left:...来避免IE11、Firefox和Chrome的显示差异。正是我想要的，它会根据内容自动调整表头的高度，而无需任何额外的 JavaScript！与我的用例配合得很好。看起来 sideways-lr 不需要旋转 180 度 hack，但目前只有 Firefox 支持。要正确打印，您需要使用 span。

以上是关于如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小的主要内容，如果未能解决你的问题，请参考以下文章

如何在SeekBar上旋转TextView？