HTML表格中的垂直（旋转）文本
Answers:
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>截至2017年，上述站点已简化了规则集，以删除旧版Internet Explorer过滤器并更多地依赖现在的标准transform属性：
.box_rotate {
-webkit-transform: rotate(7.5deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(7.5deg); /* IE 9 */
transform: rotate(7.5deg); /* Firefox 16+, IE 10+, Opera */
}<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
看起来很棒-我将检查它在各种浏览器中的工作情况。（
—
Florian Jenn
90deg当然，还有使用方法...）
不过，有一个问题，表格标题th列在必要时不会在旋转后增加其宽度，因此它看上去有些模糊（在FF中进行了尝试）:(
—
xaralis 2010年
是的，在firefox中（不了解其他浏览器），要么<tr>旋转了，而列的其余部分没有调整OR，您可以在<tr>内放置<div>并尝试设置<tr>相对位置的位置和<div>所包含的绝对位置，它是-moz-transform-origin：0 50％；这将纠正其位置。为了获得正确的宽度和高度，您可能需要使用jquery或其他方法将<tr>的宽度和高度分别设置为<div>的高度和宽度。
—
阿德里安·加纳
仅在具有正方形单元格的情况下有效，因此不会节省任何水平空间
—
99个问题-语法不是
这仅适用于
—
Rajshekar Reddy
square，否则旋转后高度和宽度也随元素一起旋转，这会破坏外观，并且元素文本与其他元素重叠
在原始答案和我以前的答案中，在IE8线上有一个引号，将其引出，就在分号附近。Yikes和BAAAAD！以下代码正确设置了旋转角度并可以正常工作。您必须在IE中浮动才能应用过滤器。
<div style =“
向左飘浮;
职位：相对
-moz-transform：旋转（270deg）; / * FF3.5 + * /
-o-transform：旋转（270deg）; / * Opera 10.5 * /
-webkit-transform：旋转（270deg）; / * Saf3.1 +，Chrome * /
过滤器：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）; / * IE6，IE7 * /
-ms-filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）; / * IE8 * /
”
>计数和价值</ div>;
+1指出了为此在IE中工作需要浮动的必要性。
—
RET
经过两个多小时的尝试，我可以肯定地说，到目前为止提到的所有方法都不适用于浏览器，甚至不适用于IE浏览器版本。
例如（最高评价的答案）：
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */在IE9中旋转两次，一次用于过滤器，一次用于-ms-filter，所以...
所有其他提到的方法也不起作用，至少在不必设置表格标题单元格的固定高度/宽度（带有背景色）的情况下，该方法不会自动调整为最高元素的大小。
因此，要详细说明Nathan Long提出的服务器端映像生成，这实际上是唯一可以普遍使用的方法，这里是我的通用处理程序（* .ashx）的VB.NET代码：
Imports System.Web
Imports System.Web.Services
Public Class GenerateImage
Implements System.Web.IHttpHandler
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
'context.Response.ContentType = "text/plain"
'context.Response.Write("Hello World!")
context.Response.ContentType = "image/png"
Dim strText As String = context.Request.QueryString("text")
Dim strRotate As String = context.Request.QueryString("rotate")
Dim strBGcolor As String = context.Request.QueryString("bgcolor")
Dim bRotate As Boolean = True
If String.IsNullOrEmpty(strText) Then
strText = "No Text"
End If
Try
If Not String.IsNullOrEmpty(strRotate) Then
bRotate = System.Convert.ToBoolean(strRotate)
End If
Catch ex As Exception
End Try
'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
'Dim img As System.Drawing.Image = CreateBitmapImage(strText, bRotate)
' Generic error in GDI+
'img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)
'Dim bm As System.Drawing.Bitmap = New System.Drawing.Bitmap(img)
'bm.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)
Using msTempOutputStream As New System.IO.MemoryStream
'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
msTempOutputStream.Flush()
context.Response.Buffer = True
context.Response.ContentType = "image/png"
context.Response.BinaryWrite(msTempOutputStream.ToArray())
End Using ' img
End Using ' msTempOutputStream
End Sub ' ProcessRequest
Private Function CreateBitmapImage(strImageText As String) As System.Drawing.Image
Return CreateBitmapImage(strImageText, True)
End Function ' CreateBitmapImage
Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean) As System.Drawing.Image
Return CreateBitmapImage(strImageText, bRotate, Nothing)
End Function
Private Function InvertMeAColour(ColourToInvert As System.Drawing.Color) As System.Drawing.Color
Const RGBMAX As Integer = 255
Return System.Drawing.Color.FromArgb(RGBMAX - ColourToInvert.R, RGBMAX - ColourToInvert.G, RGBMAX - ColourToInvert.B)
End Function
Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean, strBackgroundColor As String) As System.Drawing.Image
Dim bmpEndImage As System.Drawing.Bitmap = Nothing
If String.IsNullOrEmpty(strBackgroundColor) Then
strBackgroundColor = "#E0E0E0"
End If
Dim intWidth As Integer = 0
Dim intHeight As Integer = 0
Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
bgColor = System.Drawing.ColorTranslator.FromHtml(strBackgroundColor)
Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
TextColor = InvertMeAColour(bgColor)
'TextColor = Color.FromArgb(102, 102, 102)
' Create the Font object for the image text drawing.
Using fntThisFont As New System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Pixel)
' Create a graphics object to measure the text's width and height.
Using bmpInitialImage As New System.Drawing.Bitmap(1, 1)
Using gStringMeasureGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpInitialImage)
' This is where the bitmap size is determined.
intWidth = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Width)
intHeight = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Height)
' Create the bmpImage again with the correct size for the text and font.
bmpEndImage = New System.Drawing.Bitmap(bmpInitialImage, New System.Drawing.Size(intWidth, intHeight))
' Add the colors to the new bitmap.
Using gNewGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpEndImage)
' Set Background color
'gNewGraphics.Clear(Color.White)
gNewGraphics.Clear(bgColor)
gNewGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
''''
'gNewGraphics.TranslateTransform(bmpEndImage.Width, bmpEndImage.Height)
'gNewGraphics.RotateTransform(180)
'gNewGraphics.RotateTransform(0)
'gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault
gNewGraphics.DrawString(strImageText, fntThisFont, New System.Drawing.SolidBrush(TextColor), 0, 0)
gNewGraphics.Flush()
If bRotate Then
'bmpEndImage = rotateImage(bmpEndImage, 90)
'bmpEndImage = RotateImage(bmpEndImage, New PointF(0, 0), 90)
'bmpEndImage.RotateFlip(RotateFlipType.Rotate90FlipNone)
bmpEndImage.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipNone)
End If ' bRotate
End Using ' gNewGraphics
End Using ' gStringMeasureGraphics
End Using ' bmpInitialImage
End Using ' fntThisFont
Return bmpEndImage
End Function ' CreateBitmapImage
' http://msdn.microsoft.com/en-us/library/3zxbwxch.aspx
' http://msdn.microsoft.com/en-us/library/7e1w5dhw.aspx
' http://www.informit.com/guides/content.aspx?g=dotnet&seqNum=286
' http://road-blogs.blogspot.com/2011/01/rotate-text-in-ssrs.html
Public Shared Function GenerateImage_CrappyOldReportingServiceVariant(ByVal strText As String, ByVal strFont As String, bRotate As Boolean) As System.Drawing.Image
Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
bgColor = System.Drawing.ColorTranslator.FromHtml("#E0E0E0")
Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
'TextColor = System.Drawing.Color.FromArgb(255, 0, 0, 255)
If String.IsNullOrEmpty(strFont) Then
strFont = "Arial"
Else
If strFont.Trim().Equals(String.Empty) Then
strFont = "Arial"
End If
End If
'Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Regular
Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Bold
Dim fontFamily As New System.Drawing.FontFamily(strFont)
Dim iFontSize As Integer = 8 '//Change this as needed
' vice-versa, because 270° turn
'Dim height As Double = 2.25
Dim height As Double = 4
Dim width As Double = 1
' width = 10
' height = 10
Dim bmpImage As New System.Drawing.Bitmap(1, 1)
Dim iHeight As Integer = CInt(height * 0.393700787 * bmpImage.VerticalResolution) 'y DPI
Dim iWidth As Integer = CInt(width * 0.393700787 * bmpImage.HorizontalResolution) 'x DPI
bmpImage = New System.Drawing.Bitmap(bmpImage, New System.Drawing.Size(iWidth, iHeight))
'// Create the Font object for the image text drawing.
'Dim MyFont As New System.Drawing.Font("Arial", iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)
'// Create a graphics object to measure the text's width and height.
Dim MyGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpImage)
MyGraphics.Clear(bgColor)
Dim stringFormat As New System.Drawing.StringFormat()
stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical
'stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical Or System.Drawing.StringFormatFlags.DirectionRightToLeft
Dim solidBrush As New System.Drawing.SolidBrush(TextColor)
Dim pointF As New System.Drawing.PointF(CSng(iWidth / 2 - iFontSize / 2 - 2), 5)
Dim font As New System.Drawing.Font(fontFamily, iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)
MyGraphics.TranslateTransform(bmpImage.Width, bmpImage.Height)
MyGraphics.RotateTransform(180)
MyGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault
MyGraphics.DrawString(strText, font, solidBrush, pointF, stringFormat)
MyGraphics.ResetTransform()
MyGraphics.Flush()
'If Not bRotate Then
'bmpImage.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipNone)
'End If
Return bmpImage
End Function ' GenerateImage
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property ' IsReusable
End Class请注意，如果您认为这部分
Using msTempOutputStream As New System.IO.MemoryStream
'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
msTempOutputStream.Flush()
context.Response.Buffer = True
context.Response.ContentType = "image/png"
context.Response.BinaryWrite(msTempOutputStream.ToArray())
End Using ' img
End Using ' msTempOutputStream可以替换为
img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)因为它可以在开发服务器上运行，所以如果将相同的代码部署到Windows 2003 IIS 6服务器上，您会非常误以为相同的代码不会引发Generic GDI +异常...
然后像这样使用它：
<img alt="bla" src="GenerateImage.ashx?no_cache=123&text=Hello%20World&rotate=true" />
但是，这取决于VB.NET，它也不是通用的。（但至少将问题从客户端转移到了服务器。）
—
Florian Jenn
@Florian Jenn：嗯，是的，VB.NET代码取决于VB.NET，但是您可以使用PHP或Phyton或Ruby或类似的东西来做同样的事情：）顺便说一下，将其转换为C＃并可以使其在mono上运行Linux或Mac或Solaris。
—
Stefan Steiger 2013年
我对社区的第一个贡献，例如仅使用html和CSS旋转简单文本和表格标题。
的HTML
<div class="rotate">text</div>的CSS
.rotate {
display:inline-block;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
当前建议使用代码段代替jsfiddle。
—
matsjoyce 2014年
如果我正确理解，与ÁlvaroG. Vicario的解决方案相比，这些是最新的CSS规则？
—
Florian Jenn 2014年
@matsjoyce段有很多的bug，并在休息之间做它失去工作..
—
Rajshekar雷迪
此答案仅适用于方形单元格。.它适用于矩形单元格jsfiddle.net/a2uxgm44/156
—
Rajshekar Reddy
这是一种适用于纯文本并经过某些服务器端处理的代码：
public string RotateHtmltext(string innerHtml)
{
const string TRANSFORMTEXT = "transform: rotate(90deg);";
const string EXTRASTYLECSS = "<style type='text/css'>.r90 {"
+ "-webkit-" + TRANSFORMTEXT
+ "-moz-" + TRANSFORMTEXT
+ "-o-" + TRANSFORMTEXT
+ "-ms-" + TRANSFORMTEXT
+ "" + TRANSFORMTEXT
+ "width:1em;line-height:1ex}</style>";
const string WRAPPERDIV = "<div style='display: table-cell; vertical-align: middle;'>";
var newinnerHtml = string.Join("</div>"+WRAPPERDIV, Regex.Split(innerHtml, @"<br */?>").Reverse());
newinnerHtml = Regex.Replace(newinnerHtml, @"((?:<[^>]*>)|(?:[^<]+))",
match => match.Groups[1].Value.StartsWith("<")
? match.Groups[1].Value
: string.Join("", match.Groups[1].Value.ToCharArray().Select(x=>"<div class='r90'>"+x+"</div>")),
RegexOptions.Singleline);
return EXTRASTYLECSS + WRAPPERDIV + newinnerHtml + "</div>";
}它给出了类似的东西：
<style type="text/css">.r90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 1em;
line-height: 1ex;
}</style>
<div style="display: table-cell; vertical-align: middle;">
<div class="r90">p</div>
<div class="r90">o</div>
<div class="r90">s</div>
</div><div style="display: table-cell; vertical-align: middle;">
<div class="r90">(</div>
<div class="r90">A</div>
<div class="r90">b</div>
<div class="r90">s</div>
<div class="r90">)</div>
</div>另一个解决方案：
(function () {
var make_rotated_text = function (text)
{
var can = document.createElement ('canvas');
can.width = 10;
can.height = 10;
var ctx=can.getContext ("2d");
ctx.font="20px Verdana";
var m = ctx.measureText(text);
can.width = 20;
can.height = m.width;
ctx.font="20px Verdana";
ctx.fillStyle = "#000000";
ctx.rotate(90 * (Math.PI / 180));
ctx.fillText (text, 0, -2);
return can;
};
var canvas = make_rotated_text ("Hellooooo :D");
var body = document.getElementsByTagName ('body')[0];
body.appendChild (canvas);
}) ();我绝对承认这是非常棘手的，但是如果您要避免膨胀CSS，这是一个简单的解决方案。
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE6,IE7 allows only 1, 2, 3 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 allows only 1 2 or 3*/看看这个，我在寻找IE 7解决方案时发现了这个。
绝对是CSS震动的绝佳解决方案
谢谢aiboy的灵魂
这是我遇到这个链接喵的堆栈溢出链接
.vertical-text-vibes{
/* this is for shity "non IE" browsers
that dosn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */ ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */ -ms-writing-mode: tb-rl;
/* IE7 and below */ *writing-mode: tb-rl;
}