在 HTML 表格标题单元格内垂直旋转文本

Question

我正在使用以下 css 来旋转表格标题单元格内的文本，但标题单元格的宽度与文本是水平的一样。我怎样才能旋转文本，宽度会自动减小..

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

Answer 1

上面的solution by jobjorn 现在在 Chrome 中中断，因为它从 2016 年初开始支持书写模式，因此基本上尝试将文本旋转两次，并以错误定位的水平文本结束。据我了解，Firefox 和 Safari 可能很快也会支持这一点，这也会导致它们崩溃。在我的头撞到墙上之后，我通过将 CSS 更改为：

@supports not (writing-mode:vertical-rl) {
    table div.rotated {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        white-space: nowrap;
    }
}

@supports (writing-mode:vertical-rl) {
    table div.rotated {
        writing-mode:vertical-rl;
        -webkit-transform: rotate(180deg) translate(8px,0px);
        -moz-transform: rotate(180deg) translate(8px,0px);
        white-space: nowrap;
    }
}

在我的特定示例中，8 像素的平移是对齐看起来正确的原因。您的里程可能会有所不同。 180 度旋转是为了使文本的顶部朝左而不是朝右。如果您不需要，您可以跳过第二部分中的转换。

在 JavaScript 中，您还需要确保不移动最后一次变换的原点，因为只有在使用变换来进行垂直方向本身时才需要这样做，所以我将该部分包裹在一个条件：

var supportsWM = CSS.supports('writing-mode', 'vertical-rl');
if (!supportsWM) {
    newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
    newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
}

Answer 2

在 IE 和 Chrome（Blink 和 Webkit）中，您可以使用垂直书写模式而不是使用变换将文本放在子级中。为您节省所有 CSS 和 JavaScript 技巧。 Chrome 目前有一个小的显示错误（Chrome 37），但已报告。

.vertical { 
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
 }

 <td><span class="vertical">This text should be vertical.</span></td>

我建议在表格内的垂直文本上使用white-space:nowrap。

Answer 3

Mods：对不起，这篇文章“回应了一个答案”。但我没有必要的业力来评论它。第 22 条军规。

@jobjorn 的答案和 fiddl 中的代码依赖于单元格宽度来计算标题高度，这会在任何单元格宽时导致错误的高度。这个修改后的小提琴使用标题文本宽度代替：http://jsfiddle.net/marvmartian/76z82/

    cellsToRotate.each(function () {
        var cell = $(this);
        var s = '<div id="killme" style="position:absolute; top:-10000px; left:-10000px;"><span id="string_span" style="font-weight: bold; font-size: 1em">'+
            cell.text()+'</span></div>';
        $(window).append(s);
        var width = $('#string_span').width();
        var newText = cell.text()
            , height = cell.height()
            //, width = cell.width()
            , newDiv = $('<div>', {  height: width,  width: height })
            , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

Answer 4

如果您只需要调整单元格的宽度并且每个单元格只包含一行文本，您可以这样做：http://jsfiddle.net/sSP8W/3/ — 将元素的 width 设置为 line-height。

CSS3-transforms 的问题在于它们像 CSS'position: relative 一样工作：它们的原始框保持不变，因此旋转、倾斜等不会导致元素尺寸发生变化。所以：真的没有完美的 CSS 解决方案，你可以使用 JS 调整尺寸，或者尝试寻找hacky 的解决方法。因此，如果您在表格中只有链接，您可以这样做：http://jsfiddle.net/sSP8W/4/ — 旋转表格本身。

如果您的案例有其他您不想轮换的内容 - 请更新帖子，以便我们尝试找到更好的解决方案。

upd： 刚刚找到了一个解决表格中旋转文本的方法：使用一些带有垂直填充的魔法，我们可以使单元格拉伸到内容，所以看看这个几乎是最后一个例子：http://dabblet.com/gist/4072362

Answer 5

我使用a jQuery plugin by David Votrubec 和 Mike 在博文下方的评论解决了这个问题。

把它放在一个 .js 文件中：

(function ($) {
  $.fn.rotateTableCellContent = function (options) {
  /*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/

var cssClass = ((options) ? options.className : false) || "vertical";

var cellsToRotate = $('.' + cssClass, this);

var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);

betterCells.push(newDiv);
});

cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);

在你的页面顶部：

<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.yourtableclass').rotateTableCellContent();
    });
</script>

这在你的 CSS 中：

/* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode:tb-rl;
    white-space: nowrap;
}

thead th {
    vertical-align: top;
}

table .vertical {
    white-space: nowrap;
}

然后确保您的表格具有“yourtableclass”类，并且您要旋转的所有 TD 都具有“vertical”类。

这是demo running in a jsFiddle。

希望它对某人有所帮助，即使我迟到了一年！

Answer 6

摆脱padding:60px 1px;（除非您出于其他原因需要它......但这就是导致问题的原因）。

示例：http://jsfiddle.net/purmou/sSP8W/