如何根据旋转文本调整元素大小 [英] How to size elements according to rotated text

问题描述

我正在尝试旋转表格标题，以使其垂直放置，但周围的元素最终小于div.好像th是根据旋转之前div的大小来确定自己.

I'm trying to rotate my table headings so they're laid out vertically, but the surrounding th elements end up smaller than the div. It's as though the th is sizing itself according to the div before the rotation.

如何根据旋转的div自动设置尺寸?

How to I make the th automatically size based on the rotated div?

.columnHeader {
  transform: rotate(-90deg);
}

th {
  background-color: #f88;
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

编辑:由于重复项，该问题已关闭，但是该重复项并没有一个很好的答案，所以让我在这里发布一个非常干净的解决方案:

Edit: This question got closed due to a dup, but that dup doesn't contain a great answer, so let me post a really clean solution here:

.columnHeader {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

th {
  background-color: #f88;
}

td {
  text-align: center;
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One long heading</div>
    </th>
    <th>
      <div class="columnHeader">Two long headings</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

请注意，"vertical-rl"模式实际上是在旋转180度后从左到右.

Note that the "vertical-rl" mode actually becomes left-to-right after the 180-degree rotation.

编辑2 :感谢那些提供了答案的人，但是我没有投票或接受大多数答案，因为在我撰写本文时，他们并没有解决如何确定尺寸的原始问题根据旋转文本的元素.他们中的一些人手动调整了像素或em的元素大小，但是我当然可以这样做.任何元素的大小都可以手动调整.那不是我想要的；如果不清楚，我可以改写这篇文章的标题.

Edit 2: Thanks to those who provided answers, but I haven't upvoted or accepted most of them because, as I write this, they don't solve the original problem of how to size an element according to rotated text. Some of them manually tweak the element size in pixels or ems, but of course I could have done that in the first place; any element's size can be tweaked manually. That's not what I meant to ask for; if that's unclear, I could reword this post's title.

推荐答案

您可以使用 书写模式

You may use writing-mode

writing-mode CSS属性定义文本行是水平放置还是垂直放置以及块前进的方向.

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

.columnHeader {
  writing-mode:vertical-lr;
  writing-mode:sideways-lr; /* FF or use transform and vertical-lr*/
}

th {
  background-color: #f88;
  width: 1.2em;/* which means min-width according to the table-layout algorythm.*/
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One of any length</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

codepen示例 https://codepen.io/gc-nomade/pen/EKQKBe

codepen example https://codepen.io/gc-nomade/pen/EKQKBe

已删除但未删除，请留在此处以获取信息. *您可以使用 float 和一个伪元素以及一个垂直的％ padding 绘制一个正方形以开始宽度.

deleted and not, left here for infos. * You can use float and a pseudo element and a vertical %padding to draw a square to start width.

即使对于" padding-top "和" padding-bottom "，该百分比也是根据生成的框的包含块的宽度计算的.如果包含块的宽度取决于此元素，则CSS 2.1中未定义结果布局.与 margin 属性不同， padding 值的值不能为负.像 margin 属性一样，填充属性的百分比值 是指生成的框的包含块的宽度.

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1. Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

• 添加负的 margin-right 值实际上会将 .columHeader 的宽度减小为null.

  • Adding a negative margin-right value will virtually reduce width of .columHeader to null.

    旋转 .columnHeader

    向第 个添加 width (这与 min-width 类似).

    add a width to th (which will be alike min-width ).

    .columnHeader {
      transform: rotate(-90deg);
    }
    
    th {
      background-color: #f88;
      width: 1.2em;
    }
    
    .columnHeader {
      float: left;
      margin-right: -20em;
    }
    
    .columnHeader:before {
      content: '';
      float: left;
      padding-top: 105%;
    }

    <table>
      <tr>
        <th>
          <div class="columnHeader">One of any length</div>
        </th>
        <th>
          <div class="columnHeader">Two</div>
        </th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </table>

    codepen示例

    codepen example

    https://codepen.io/gc-nomade/pen/Cqkig

    这篇关于如何根据旋转文本调整元素大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！