相关疑难解决方法(0)
在表格中将文本旋转为标题(跨浏览器)
这不是一个问题.
我只觉得花了这么多时间搞清楚如何做到这一点我会讨厌自己,如果我不把它保存在某个地方,如果我没有分享我找到的东西,我会是一个糟糕的程序员.(在这里一石二鸟.)
所以这里是用于在表中旋转文本作为标题的代码.
<html>
<head>
<!--[if IE]>
<style>
.rotate_text
{
writing-mode: tb-rl;
filter: flipH() flipV();
}
</style>
<![endif]-->
<!--[if !IE]><!-->
<style>
.rotate_text
{
-moz-transform:rotate(-90deg);
-moz-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top left;
-o-transform: rotate(-90deg);
-o-transform-origin: top left;
position:relative;
top:20px;
}
</style>
<!--<![endif]-->
<style>
table
{
border: 1px solid black;
table-layout: fixed;
width: 69px; /*Table width must be set or it wont resize the cells*/
}
th, td
{
border: 1px solid black;
width: 23px;
}
.rotated_cell
{
height:300px;
vertical-align:bottom
} …推荐指数
解决办法
查看次数
在 Chrome 中使用 css3 书写模式的表格单元格中的垂直文本
首先，我想承认表格单元格中的垂直文本问题存在，但是由于这只是尝试旋转整个单元格而不是垂直书写样式，因此它与我的问题无关（例如该问题确实不包括text-orientation: upright;应用程序）
我目前正在研究一些我想在表格单元格中使用 CSS 垂直文本的地方，使用writing-mode: vertical-rl或vertical-lr。但是，当我尝试将其应用于表格时，它没有做任何事情。请参阅以下最小示例：
th, td, div {
writing-mode: vertical-rl;
}<table>
<tr><th>foo</th><th>bar</th></tr>
<tr><td>baz</td><td>quux</td></tr>
</table>
<div>Lorem ipsum dolor sit amet</div>正如您在 Chrome 中查看时所看到的，表格中的文本根本没有旋转（虽然这div清楚地表明该样式确实适用于 Chrome 的其他地方）。使用 Chrome 检查器，样式似乎与单元格正确匹配，但在“计算”样式选项卡下，它显示计算样式为writing-mode: horizontal-tb;.
我可以做些什么来使垂直文本在所有主要浏览器中都能正常工作？顺便说一下，Mozilla 在他们的 MDN 页面底部的桌子上transform: rotate(-90deg)这样做，它使用，这似乎不太可能，但它确实在页面顶部发表了他们的声明（“这对（... ) 制作垂直表格标题。”) 有点好奇。
我想使用的原因writing-mode是，使用transform: rotate(90deg)它时不会重新计算表格单元格的尺寸，在某些情况下会导致文本溢出单元格。
推荐指数
解决办法
查看次数
如何正确放置旋转文本？
我有一个包含 3 列的 flex 包装器，在第三列中有旋转的文本，如何将文本放置在该列的右下角位置？
我想要的是：
我拥有的：
.wrapper {
border: 1px solid black;
padding-top: 50px;
display: flex;
justify-content: space-between;
}
.column-2 {
transform-origin: left bottom;
transform: rotate(-90deg);
}<div class="wrapper">
<div class="column-1">Column 1</div>
<div class="column-2">Column 2</div>
</div>推荐指数
解决办法
查看次数