Question

我试图将MediaWiki表格中的标题从水平变为垂直。这样就可以为表格数据留出更多空间。

我发现这个MediaWiki模板可以在任意方向上转换文本

https://en.wikipedia.org/wiki/Template:Transform-rotate

这基本上有效，但它没有解决问题：在表格中它接缝在网络浏览器中首先所有单元格都是布局的，然后文本被旋转。这样，所有表格标题单元格将在执行旋转后覆盖相同的空间量，这不能解决我的问题。我需要相反的方法：首先旋转文本，然后将表格布局。

如何通过CSS实现这一目标？如何在表格标题中将文本垂直化，这样可以节省水平空间？

Answer 1

感谢StackOverflow，我能够了解到没有简单的解决方案，甚至可能根本没有使用CSS2的解决方案。但是有可能使用CSS3。

要在MediaWiki表中垂直显示文本，您需要执行以下操作：

将文本部分换行以在span标记
使用以下CSS设置：
- writing-mode: sideways-lr; - 这将启用垂直底部到顶部的书写风格
- white-space: nowrap; - 这会阻止文字换行;通过这种方式，您可以获得干净的垂直线条
- min-width: 20px; - 通过这种方式，您可以确保垂直线条不会太小

这甚至适用于Semantic Media Wiki查询。您可能希望将此用于结果表的标头。例如：

{{#ask: [[DevReg:+]] [[DeviceType::Switch]]
|?DeviceManufacturer={{VerticalText|Manufacturer}}
|?DeviceModel={{VerticalText|Model}}
|?DevicePortsGBit={{VerticalText|Ethernet ports}}
|format=table
}}

模板VerticalText应该像这样定义：

<includeonly><span style="writing-mode: sideways-lr; white-space: nowrap; min-width: 20px;">{redirect_with resource, location: "/"
}</span></includeonly>

如何在MediaWiki表中将表头标题设置为垂直？

1 个答案: