[精讚] [會員登入]
5636

CSS 垂直中文字

要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

此文完整連結 http://n.sfs.tw/13102

複製連結 CSS 垂直中文字@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 11:43:34 最後編修
2019-02-12 16:02:35 By 張○○
 

自動目錄

CSS中如果想要用直列的文字,只要把文字選擇直式顯示即可,這時可使用 writing-mode屬性。

這個屬性預設是水平顯示,也就是

writing-mode: horizontal-tb;

可以使用由右到左和由左到右的垂直顯示方式

writing-mode: vertical-rl;

writing-mode: vertical-lr;

來看看範例

由右至左垂直文字

HTML

<div>ABC 123 中文字<br/>DEF 667 第二行</div>

CSS

writing-mode: vertical-rl;

 

由左至右垂直文字

HTML

<div>ABC 123 中文字<br/>DEF 667 第二行</div>

CSS

writing-mode: vertical-lr;

上面的設定中,英文的方向都是由右到左,如果想要讓他轉個180度,突然想到原本CSS有個由右至左有CSS,不知管不管用:

direction: rtl;

上面這個只對水平顯示有用,對垂直的是完全沒作用。

 

所以如果要讓文字轉180度,就得使用 text-orientation 這個屬性質,他有幾個參數可以設定[1]

text-orientation: mixed;  預設值,就是上面看到的那樣

text-orientation: upright;

text-orientation: sideways-right;

text-orientation: sideways;

text-orientation: use-glyph-orientation;

text-orientation: inherit;

text-orientation: initial;

text-orientation: unset;

CSS

writing-mode: vertical-lr;
text-orientation: upright;

CSS

writing-mode: vertical-lr;
text-orientation: sideways-right;

原本轉不過去的中文字也橫轉

 

CSS

writing-mode: vertical-lr;
text-orientation: sideways;

sidewayssideways-right 看不出差異,這兩個是相同的。

text-orientation: use-glyph-orientation; 這個是給svg圖型用的,搭配作廢的什麼svg屬性,有興趣的人再去研究

到目前為只,都沒有辦法把文字轉向逆時針90度方向,無論中文或英數,都只能垂直或是順轉90度。

要逆轉90度或更多,得使出殺手鐧了。

 

中文字逆轉90度

使用transform的rotate函數

writing-mode: vertical-rl;
text-orientation: sideways;
transform: rotate(-180deg);

writing-mode: vertical-rl;
text-orientation: upright;
transform: rotate(-90deg);

如果把upright的轉90度,就會變成這樣,字掉到畫面外,因為字的align是中央,旋轉後以中央為軸心

你得設定區塊的寬度讓他可以完全顯示,加上以下:

width:200px;

或是修改旋轉的軸心,這部分可以參考[3] +transform-origin(0,0)。這裡我沒有試,他的範例還做了一個時鐘,超酷的。

 

參考資料

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

[2] 改变CSS世界纵横规则的writing-mode属性 https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/

[3] CSS沒有極限 - CSS transform-origin https://wcc723.github.io/css/2013/10/10/css-transform-origin/

你可能感興趣的文章

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

為什麼要買長達二十年的保單? 為什麼要買長達二十年的保單?找一個可以說服我買二十年保單的理由。

談借錢 人借錢時手心向上頭向下,人還錢時手心向下頭向上

[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。

[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔

維修海棉拖把頭 這類型的海棉拖把很好用,可是這近發現海棉頭越來越不耐用,也許是錯覺,以往都能用個三四個月,現在二個月就差不多掉下來。 這