在HTML表格中垂直（旋转）的文字

是否有一种（便携式）方式将HTML表格单元格中的文本旋转90°？

（我有一个有很多列和标题的文字很多的表格，所以我想垂直写下来以节省空间。）

.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>

替代解决scheme？

是不是要旋转文字，是否会“上下”写呢？

喜欢这个：

 SOMETEXT

我认为这会更容易 – 你可以select一个文本string，并在每个字符之后插入一个换行符。

这可以通过浏览器中的JavaScript完成，如下所示：

 "SOME TEXT".split("").join("\n")

…或者你可以做到服务器端，所以它不会依赖于客户端的JSfunction。（我认为这就是“便携式”的意思）

另外，用户不必将他/她的头部横向读取。 🙂

更新

这个线程是关于用jQuery来做这个的。

在原来的答案和我以前的答案在IE8行中有一个引号抛出，在分号附近。 Yikes和BAAAAD！下面的代码具有正确的旋转设置和工作。你必须漂浮在IE中才能使用filter。

 <div style =“
     float：left; 
    位置：相对;
     -moz-transform：rotate（270deg）;  / * FF3.5 + * /        
     -o-transform：旋转（270deg）;  / * Opera 10.5 * /   
     -webkit-transform：rotate（270deg）;  / * Saf3.1 +，Chrome * /              
     filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;  / * IE6，IE7 * /          
     -ms-filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;  / * IE8 * /           
 “
 >计数和值</ div>;

经过两个多小时的试用后，我可以放心地说，到目前为止所提到的所有方法都不适用于浏览器，甚至是浏览器版本的IE浏览器。

例如（top upvoted的答案）：

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

在IE9中旋转两次，一次为filter，一次为-ms-filter，所以…

所有其他提到的方法也不起作用，至less不需要设置表格标题单元的固定高度/宽度（具有背景颜色），它应该自动调整到最高元素的大小。

因此，为了详细说明由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服务器上，那么相同的代码不会抛出通用的GDI +exception。

然后像这样使用它：

 <img alt="bla" src="GenerateImage.ashx?no_cache=123&text=Hello%20World&rotate=true" />

我对社区的第一个贡献，例如旋转简单文本和表头，只使用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的例子

IEfilter和CSS转换（ Safari和Firefox ）。

IE的支持是最早的，Safari在3.1.2中至less有一些支持，直到3.1才支持Firefox。

或者，我会推荐混合使用Canvas / VML或SVG / VML。（帆布有更广泛的支持。）

这是一个适用于纯文本与一些服务器端处理：

 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>

http://jsfiddle.net/TzzHy/

我正在使用字体真棒图书馆，并能够实现这一影响，通过对以下任何HTML元素加以解决。

 <div class="fa fa-rotate-270"> My Test Text </div>

你的旅费可能会改变。

另一个scheme

 (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); }) ();

我绝对承认，这是相当hackish，但这是一个简单的解决scheme，如果你想避免臃肿你的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*/

看看这个，我发现这个同时寻找一个解决scheme的IE 7。

完全是一个很酷的解决scheme，仅适用于css

感谢aiboy精神

inheritance人的链接

这里是我遇到这个链接喵喵的堆栈溢出链接

  .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; }

在HTML表格中垂直（旋转）的文字

替代解决scheme？

更新

如何在Android TextView中将字体样式设置为粗体，斜体和下划线？