HTML 表中的垂直(旋转)文本

有没有一种(便携式的)方法可以将 HTML 表格单元格中的文本旋转90 ° ？

(我有一个包含许多列和大量标题文本的表格，所以我希望垂直编写以节省空间。)

189537 次浏览
小开

替代方案？

与其旋转文本，不如写成“从上到下”

像这样:

S
O
M
E


T
E
X
T

我认为这会容易得多-您可以选择一个字符串的文本分开，并插入一个分行符后，每个字符。

This could be done via JavaScript in the browser like this:

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

... 或者您可以在服务器端执行，这样就不会依赖于客户端的 JS 功能。(我想这就是你所说的“便携式”吧?)

Also the user doesn't have to turn his/her head sideways to read it. :)

更新

这个线程 是关于如何使用 jQuery 实现这一点的。

小开

IE 过滤器 还有 CSS 转换(旅行和 火狐)。

IE 的支持是最古老的，Safari 在3.1.2中有[至少一些? ]支持，而 Firefox 在3.1之前不会有支持。

或者，我建议混合使用 Canvas/VML 或 SVG/VML (Canvas 有更广泛的支持)

小开
最佳答案 

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

取自 http://css3please.com/

截至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>

小开 
-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*/
小开

在原始答案和我之前在 IE8行的答案中有一个引用，这个引用就在分号附近。哎呀和 BAAAAD！下面的代码已经正确地设置了旋转并且可以工作。你必须在 IE 中浮动以应用过滤器。

<div style="
float: left;
position: relative;
-moz-transform: rotate(270deg);  /* FF3.5+ */
-o-transform: rotate(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 */
"
>Count & Value</div>;
小开

下面是一个适用于具有某些服务器端处理的纯文本的代码:

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/

小开

After having tried for over two hours, I can safely say that all the method mentioned so far don't work across browsers, or for IE even across browser versions...

例如:

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

rotates twice in IE9, once for filter, and once for -ms-filter, so...

所有其他提到的方法也不能工作，至少如果您必须设置不固定的高度/宽度的表标题单元格(与背景颜色) ，它应该自动调整大小的最高元素。

因此，为了详细说明 Nathan Long 提出的服务器端映像生成方法(这是唯一通用的工作方法) ，这里是我的通用处理程序的 VB.NET 代码(* 。Ashx) :

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)

because it works on the development server, then you are sorely mistaken to assume the very same code wouldn't throw a Generic GDI+ exception if you deploy it to a Windows 2003 IIS 6 server...

然后像这样使用它:

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

我正在使用 Font Awesome 库，并且能够通过在任何 html 元素上添加以下内容来实现这种效果。

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

你的情况可能会有所不同。

小开

看看这个，我发现这是在为 IE7寻找解决方案的时候。

完全是一个很酷的解决方案的 CSS 只震波

谢谢你的解答

链接在这里

这里是堆栈溢出链接，我遇到了这个 连接喵喵

         .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 和 css 来旋转一个简单的文本和表格的标题。

enter image description here

超文本标示语言

<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 中的一个例子

小开

另一个解决办法:

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


}) ();

I do absolutely admit that this is quite hackish, but it's a simple solution if you want to avoid bloating your css.


提交答案