ข้อความแนวตั้ง (หมุน) ในตาราง HTML


119

มีวิธี (แบบพกพา) ในการหมุนข้อความในเซลล์ตาราง HTML 90 °หรือไม่?

(ฉันมีตารางที่มีหลายคอลัมน์และมีข้อความจำนวนมากสำหรับส่วนหัวดังนั้นฉันจึงต้องการเขียนในแนวตั้งเพื่อประหยัดพื้นที่)


2
คำตอบเพิ่มเติมที่นี่: stackoverflow.com/questions/4264527/css-text-direction-vertical
Erel Segal-Halevi

คำตอบ:


105

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


ดูดีมาก - ฉันจะตรวจสอบว่าสิ่งนี้ทำงานได้ดีเพียงใดกับเบราว์เซอร์ต่างๆ (และใช้90degแน่นอน ... )
Florian Jenn

9
มีปัญหาหนึ่งอย่างคือคอลัมน์ส่วนหัวของตารางจะไม่เพิ่มความกว้างหลังจากการหมุนตามความจำเป็นดังนั้นมันจึงดูเหลือบ (ลองใน FF) :(
xaralis

3
ใช่ใน firefox (ไม่รู้เกี่ยวกับเบราว์เซอร์อื่น ๆ ) ทั้ง <tr> จะถูกหมุนและส่วนที่เหลือของคอลัมน์ไม่ปรับหรือคุณสามารถใส่ <div> ใน <tr> และทดสอบด้วยการตั้งค่า <tr> POSITION เป็น RELATIVE และมี <div> เป็น ABSOLUTE และมันคือ -moz-transform-origin: 0 50%; สิ่งนี้จะแก้ไขตำแหน่งของมัน เพื่อให้ได้ความกว้างและความสูงที่ถูกต้องคุณอาจจำเป็นต้องใช้ jQuery หรือบางสิ่งบางอย่างที่จะตั้ง <tr> 's ความกว้างและความสูงที่ <div>' s ความสูงและความกว้าง (ตามลำดับ)
Adrian Garner

2
ใช้งานได้เฉพาะเมื่อคุณมีเซลล์สี่เหลี่ยมดังนั้นจึงไม่ประหยัดพื้นที่แนวนอน
99 ปัญหา - ไวยากรณ์ไม่ใช่หนึ่ง

1
สิ่งนี้จะใช้ได้เฉพาะกับเซลล์ที่เป็นsquareอย่างอื่นหลังจากหมุนความสูงและความกว้างจะถูกหมุนไปพร้อมกับองค์ประกอบที่ทำให้รูปลักษณ์แตกและข้อความองค์ประกอบซ้อนทับกับอื่น ๆ
Rajshekar Reddy

35

โซลูชันทางเลือก?

แทนที่จะหมุนข้อความจะเขียนว่า "จากบนลงล่าง" ได้หรือไม่

แบบนี้:

S  
O  
M  
E  

T  
E  
X  
T  

ฉันคิดว่ามันจะง่ายกว่ามาก - คุณสามารถเลือกสตริงข้อความแยกจากกันและแทรกตัวแบ่งบรรทัดหลังอักขระแต่ละตัว

สามารถทำได้ผ่าน JavaScript ในเบราว์เซอร์ดังนี้:

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

... หรือคุณสามารถทำได้ในฝั่งเซิร์ฟเวอร์ดังนั้นจึงไม่ขึ้นอยู่กับความสามารถ JS ของไคลเอ็นต์ (ฉันคิดว่านั่นคือสิ่งที่คุณหมายถึง "พกพา")

นอกจากนี้ผู้ใช้ไม่จำเป็นต้องหันศีรษะไปด้านข้างเพื่ออ่าน :)

ปรับปรุง

กระทู้นี้เกี่ยวกับการทำสิ่งนี้กับ jQuery


1
มีการศึกษาที่แสดงให้เห็นว่าเลย์เอาต์แบบนั้นอ่านได้น้อยกว่าที่หมุนซ้าย / ขวา
Édouard Lopez

14

มีคำพูดในคำตอบเดิมและคำตอบก่อนหน้าของฉันในบรรทัด 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 (การหมุน = 3); / * IE6, IE7 * /          
    -ms-filter: progid: DXImageTransform.Microsoft.BasicImage (การหมุน = 3); / * IE8 * /           
"
> นับและมูลค่า </div>;

5
+1 สำหรับชี้ให้เห็นถึงความจำเป็นของการลอยตัวเพื่อให้ทำงานใน IE
RET

4

หลังจากลองใช้งานมานานกว่าสองชั่วโมงฉันสามารถพูดได้อย่างปลอดภัยว่าวิธีการทั้งหมดที่กล่าวมานั้นใช้ไม่ได้กับเบราว์เซอร์หรือสำหรับ IE แม้แต่ในเบราว์เซอร์ทุกเวอร์ชัน ...

ตัวอย่างเช่น (คำตอบที่โหวตให้เติมเงิน):

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

หมุนสองครั้งใน IE9 หนึ่งครั้งสำหรับตัวกรองและอีกครั้งสำหรับ -ms-filter ดังนั้น ...

วิธีการอื่น ๆ ที่กล่าวถึงทั้งหมดก็ใช้ไม่ได้เช่นกันอย่างน้อยถ้าคุณไม่ต้องตั้งค่าความสูง / ความกว้างคงที่ของเซลล์ส่วนหัวตาราง (ด้วยสีพื้นหลัง) ซึ่งควรปรับเป็นขนาดขององค์ประกอบสูงสุดโดยอัตโนมัติ

ดังนั้นเพื่ออธิบายรายละเอียดเกี่ยวกับการสร้างอิมเมจฝั่งเซิร์ฟเวอร์ที่นาธานลองเสนอซึ่งเป็นวิธีการทำงานแบบสากลเพียงวิธีเดียวที่นี่รหัส 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)

เนื่องจากทำงานบนเซิร์ฟเวอร์การพัฒนาดังนั้นคุณจึงเข้าใจผิดอย่างมากที่คิดว่ารหัสเดียวกันจะไม่ทำให้เกิดข้อยกเว้น Generic GDI + หากคุณปรับใช้กับเซิร์ฟเวอร์ Windows 2003 IIS 6 ...

จากนั้นใช้มันดังนี้:

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

อย่างไรก็ตามสิ่งนี้ขึ้นอยู่กับ VB.NET ซึ่งไม่สามารถพกพาได้ในระดับสากล (แต่อย่างน้อยก็เปลี่ยนปัญหาจากไคลเอนต์ไปยังเซิร์ฟเวอร์)
Florian Jenn

@ ฟลอริดาเจนน์: ใช่รหัส VB.NET ขึ้นอยู่กับ VB.NET แต่คุณสามารถทำได้เช่นเดียวกันกับ PHP หรือ Phyton หรือ Ruby หรือ whater :) โดยวิธีการแปลงเป็น C # และคุณสามารถปล่อยให้มันทำงานเป็นโมโนสำหรับ Linux หรือ Mac หรือ Solaris
Stefan Steiger

4

การมีส่วนร่วมครั้งแรกของฉันต่อชุมชนเช่นการหมุนข้อความธรรมดาและส่วนหัวของตารางโดยใช้ 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


ปัจจุบันขอแนะนำให้ใช้ข้อมูลโค้ดแทน jsfiddle
matsjoyce

ถ้าฉันเข้าใจถูกต้องนี่คือกฎ CSS ที่ทันสมัยเมื่อเทียบกับโซลูชันของÁlvaro G. Vicario?
Florian Jenn

ข้อมูลโค้ด @matsjoyce มีบั๊กจำนวนมากและยังขาดระหว่างทำให้งานหลวม ..
Rajshekar Reddy

1
คำตอบนี้ใช้ได้กับเซลล์สี่เหลี่ยมเท่านั้น .. มันแตกสำหรับเซลล์สี่เหลี่ยมjsfiddle.net/a2uxgm44/156
Rajshekar Reddy

3

ตัวกรอง IE บวกการแปลง CSS ( SafariและFirefox )

การสนับสนุนของ IE นั้นเก่าที่สุด Safari มีการสนับสนุน [อย่างน้อยก็บางอย่าง] ใน 3.1.2 และ Firefox จะไม่รองรับจนถึง 3.1

หรือฉันขอแนะนำให้ใช้ Canvas / VML หรือ SVG / VML ผสมกัน (ผ้าใบรองรับได้กว้างกว่า)


ฉันเห็นด้วยกับการไม่มีเปลือกตา ตอนนี้ "แฮ็ก" เป็นอย่างมาก ไม่ค่อยพร้อมสำหรับไพรม์ไทม์
Diodeus - James MacFarlane

2

นี่คือสิ่งที่ใช้ได้กับข้อความธรรมดาที่มีการประมวลผลฝั่งเซิร์ฟเวอร์:

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/


1

ฉันใช้ไลบรารี Font Awesome และสามารถบรรลุผลกระทบนี้ได้โดยยึดสิ่งต่อไปนี้กับองค์ประกอบ html ใด ๆ

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

ระยะทางของคุณอาจแตกต่างกันไป


1

วิธีแก้ปัญหาอื่น:

(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 ของคุณบวม


0
-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*/

0

ดูสิ่งนี้ฉันพบสิ่งนี้ในขณะที่กำลังมองหาวิธีแก้ปัญหาสำหรับ IE 7

เป็นทางออกที่ยอดเยี่ยมสำหรับ css เฉพาะความรู้สึก

ขอบคุณ aiboy สำหรับ Soultion

นี่คือลิงค์

และนี่คือลิงค์ stack-overflow ที่ฉันเจอลิงค์นี้meow

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

            }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.