1. 首頁
  2. 問答
  3. 只旋轉div元素中的文本（不是div）

只旋轉div元素中的文本（不是div）

2011-05-13 40 views
7

我正在嘗試創建一個網頁，其中包含許多div元素，其位置和大小分別創建。接下來，我想將文本插入到這些元素中，以便使用JS將文本放入innerHTML中。有沒有辦法在這裏，我可以只旋轉文本90度（而不是div本身，因爲我不想改變div元素的位置和方向？只旋轉div元素中的文本（不是div）

我試過 -webkit-transform：rotate （-90deg）; -moz 變換：旋轉（-90deg）; 在CSS，但他們都旋轉的div本身，而不僅僅是文字

任何想法，如果這是可能

感謝。！

來源

2011-05-13 Devang

回答

1

我還沒有試過這個，但爲什麼不包括額外的您目前的<div>和您的文字之間有的透明背景？然後你可以旋轉那個<div>。

來源

2011-05-13 06:29:05 TNi

+0

是啊..這聽起來很合理。如果沒有簡單的話，那將是我的蠻力之路:) – Devang

1

看看這個鏈接： http://snook.ca/archives/html_and_css/css-text-rotation 似乎你必須爲不同的瀏覽器做hax ......也許CSS3有更好的解決方案。

來源

2011-05-13 06:29:19

+1

謝謝，我曾試過這個，但這是我得到webkit/moz變換想法的地方。但是這些旋轉整個div而不是文本。 – Devang

0

由於轉換旋轉整個div部分，因此可以設置包含文本的div的高度和寬度，然後對其進行轉換。

來源

2017-01-27 17:35:20 kaur

1

將文本包裝在一個範圍內並將其設置爲內嵌塊。 注意父級div不能與文本一起旋轉。

<div class="roundedOne"> 
    <span class="rotate">TEXT</span> 
</div> 

.rotate { 
    display: inline-block; 
    transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
} 

.roundedOne { 
    background: red; 
}

CODEPEN

http://codepen.io/alexincarnati/pen/JEOKzw

來源

2017-01-27 17:39:53

相關問題

 相關問題