Văn bản dọc (xoay) trong bảng HTML


119

Có cách nào (di động) để xoay văn bản trong ô bảng HTML 90 ° không?

(Tôi có một bảng với nhiều cột và nhiều văn bản cho các tiêu đề, vì vậy tôi muốn viết nó theo chiều dọc để tiết kiệm không gian.)



Có thể có bản sao của Hướng văn bản dọc

Câu trả lời:


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>

Lấy từ http://css3please.com/

Tính đến năm 2017, các trang web nói trên đã đơn giản hóa các thiết lập quy tắc để thả thừa lọc Internet Explorer và dựa nhiều hơn vào bây giờ chuẩn transformtài sản :

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


Điều đó trông rất tuyệt - Tôi sẽ kiểm tra xem điều này hoạt động tốt như thế nào với các trình duyệt khác nhau. (Và sử dụng 90deg, tất nhiên ...)
Florian Jenn

9
Tuy nhiên, có một vấn đề, các cột của tiêu đề bảng sẽ không được tăng chiều rộng của chúng sau khi xoay khi cần thiết, vì vậy nó trông có vẻ hào nhoáng (đã thử trong FF) :(
xaralis 10/11/10

3
Có, trong firefox (không biết về các trình duyệt khác) hoặc <tr> được xoay và phần còn lại của cột không điều chỉnh HOẶC, bạn có thể đặt <div> bên trong <tr> và thử nghiệm cài đặt <tr> POSITION thành RELATIVE và <div> chứa thành ABSOLUTE và nó là -moz-biến-origin: 0 50%; Điều này sẽ sửa chữa vị trí của nó. Để có được chiều rộng và chiều cao đúng, bạn có thể cần phải sử dụng jquery hoặc một cái gì đó để thiết lập <tr> 's chiều rộng và chiều cao đến <div>' s chiều cao và chiều rộng (tương ứng).
Adrian Garner

2
Chỉ hoạt động nếu bạn có các ô vuông, vì vậy không tiết kiệm bất kỳ khoảng trống nào theo chiều ngang
99 Vấn đề - Cú pháp không phải là một

1
Điều này sẽ chỉ làm việc cho tế bào đó là square, nếu không sau khi xoay chiều cao và chiều rộng cũng được quay cùng với các yếu tố mà phá vỡ giao diện và các yếu tố chồng chéo văn bản với khác
Rajshekar Reddy

35

Giải pháp thay thế?

Thay vì xoay văn bản, liệu nó có được viết "từ trên xuống dưới" không?

Như thế này:

S  
O  
M  
E  

T  
E  
X  
T  

Tôi nghĩ điều đó sẽ dễ dàng hơn rất nhiều - bạn có thể chọn một chuỗi văn bản riêng biệt và chèn dấu ngắt dòng sau mỗi ký tự.

Điều này có thể được thực hiện thông qua JavaScript trong trình duyệt như sau:

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

... hoặc bạn có thể thực hiện ở phía máy chủ, vì vậy nó sẽ không phụ thuộc vào khả năng JS của máy khách. (Tôi cho rằng đó là ý của bạn khi nói "di động?")

Ngoài ra, người dùng không cần phải quay đầu sang một bên để đọc nó. :)

Cập nhật

Chủ đề này là về thực hiện điều này với jQuery.


1
Có nghiên cứu cho thấy, loại bố trí ít có thể đọc mà xoay trái / phải
Édouard Lopez

14

Có một câu trích dẫn trong câu trả lời gốc và câu trả lời trước đây của tôi trên dòng IE8 khiến câu trả lời này bị tắt, ngay gần dấu chấm phẩy. Rất tiếc và BAAAAD! Đoạn mã dưới đây có vòng xoay được đặt chính xác và hoạt động. Bạn phải nổi trong IE để bộ lọc được áp dụng.

<div style = "
    float: trái; 
    chức vụ: thân nhân;
    -moz-biến đổi: xoay (270deg); / * FF3.5 + * /        
    -o-biến đổi: xoay (270deg); / * Opera 10.5 * /   
    -webkit-biến đổi: xoay (270deg); / * Saf3.1 +, Chrome * /              
    filter: progid: DXImageTransform.Microsoft.BasicImage (xoay = 3); / * IE6, IE7 * /          
    -ms-filter: progid: DXImageTransform.Microsoft.BasicImage (xoay = 3); / * IE8 * /           
"
> Đếm & Giá trị </div>;

5
+1 để chỉ ra sự cần thiết của float để tính năng này hoạt động trong IE.
RET

4

Sau khi đã thử trong hơn hai giờ, tôi có thể nói một cách an toàn rằng tất cả các phương pháp được đề cập cho đến nay không hoạt động trên các trình duyệt hoặc đối với IE thậm chí trên các phiên bản trình duyệt ...

Ví dụ: (câu trả lời được bình chọn nhiều nhất):

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

xoay hai lần trong IE9, một lần cho bộ lọc và một lần cho bộ lọc -ms, vì vậy ...

Tất cả các phương pháp được đề cập khác cũng không hoạt động, ít nhất là không nếu bạn không phải đặt chiều cao / chiều rộng cố định của ô tiêu đề bảng (với màu nền), nơi nó sẽ tự động điều chỉnh theo kích thước của phần tử cao nhất.

Vì vậy, để giải thích rõ hơn về cách tạo hình ảnh phía máy chủ do Nathan Long đề xuất, đây thực sự là phương pháp làm việc phổ biến duy nhất, đây là mã VB.NET của tôi cho trình xử lý chung (* .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

Lưu ý rằng nếu bạn nghĩ rằng phần này

        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

có thể được thay thế bằng

img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

bởi vì nó hoạt động trên máy chủ phát triển, khi đó bạn hoàn toàn nhầm lẫn khi cho rằng cùng một đoạn mã sẽ không tạo ra ngoại lệ Chung GDI + nếu bạn triển khai nó cho máy chủ Windows 2003 IIS 6 ...

sau đó sử dụng nó như thế này:

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

Tuy nhiên, điều này phụ thuộc vào VB.NET, nó cũng không phải là di động phổ biến. (Nhưng ít nhất cũng chuyển sự cố từ máy khách sang máy chủ.)
Florian Jenn

@Florian Jenn: Vâng, mã VB.NET phụ thuộc vào VB.NET nhưng bạn có thể làm tương tự với PHP hoặc Phyton hoặc Ruby hoặc whater :) Nhân tiện, hãy chuyển đổi nó sang C # và bạn có thể để nó chạy trên mono for Linux hoặc Mac hoặc Solaris.
Stefan Steiger

4

Đóng góp đầu tiên của tôi cho cộng đồng, ví dụ như xoay một văn bản đơn giản và tiêu đề của bảng, chỉ sử dụng html và css.

nhập mô tả hình ảnh ở đây

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

Đây là một ví dụ trong jsfiddle


Hiện tại, bạn nên sử dụng một đoạn mã thay vì jsfiddle.
matsjoyce

Nếu tôi hiểu chính xác, đây là các quy tắc CSS mới nhất, so với giải pháp của Álvaro G. Vicario?
Florian Jenn

@matsjoyce đoạn có rất nhiều lỗi và cũng phá vỡ ở giữa làm cho nó mất công việc ..
Rajshekar Reddy

1
Câu trả lời này chỉ hoạt động cho các tế bào vuông .. nó phá vỡ các tế bào hình chữ nhật jsfiddle.net/a2uxgm44/156
Rajshekar Reddy

3

Bộ lọc IE cộng với các chuyển đổi CSS ( SafariFirefox ).

Hỗ trợ của IE là lâu đời nhất, Safari có [ít nhất một số?] Hỗ trợ 3.1.2 và Firefox sẽ không hỗ trợ cho đến 3.1.

Ngoài ra, tôi muốn đề xuất kết hợp Canvas / VML hoặc SVG / VML. (Canvas có hỗ trợ rộng hơn.)


Tôi đồng ý với việc không có mí mắt. Tất cả đều là "hack" ngay bây giờ. Chưa hoàn toàn sẵn sàng cho khung giờ vàng.
Diodeus - James MacFarlane

2

Đây là một trong những hoạt động cho văn bản thuần túy với một số xử lý phía máy chủ:

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

mang lại một cái gì đó như:

<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

Tôi đang sử dụng thư viện Font Awesome và có thể đạt được điều này bằng cách thêm phần sau vào bất kỳ phần tử html nào.

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

Số dặm của bạn có thể thay đổi.


1

Giải pháp khác:

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

}) ();

Tôi hoàn toàn thừa nhận rằng điều này khá khó hiểu, nhưng đó là một giải pháp đơn giản nếu bạn muốn tránh làm đầy hơi css của mình.


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

Hãy xem này, tôi đã tìm thấy điều này khi đang tìm giải pháp cho IE 7.

hoàn toàn là một giải pháp tuyệt vời chỉ dành cho css

Cảm ơn aiboy vì linh hồn

có liên kết

và đây là liên kết tràn ngăn xếp nơi tôi đã xem liên kết này meo meo

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

            }
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.