欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【HTML】css樣式writing-mode垂直顯示文本測試

admin
2023年9月28日 1:18 本文熱度 576

writing-mode:控制文字的屬性方向,但是不是所有的瀏覽器都兼容,在網頁上使用時,有的瀏覽器顯示不出該樣式。
該文測試的是垂直書寫:
網上對于測試的屬性值的解釋是:
tb-rl:
上-下,右-左。對象中的內容在垂直方向上從上向下流入,自右向左。后一豎行在前一豎行的左面。全角字符是豎直向上的,半角字符如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的(IE)
vertical-rl:
垂直方向自右而左的書寫方式。即 top-bottom-right-left(類似IE私有值tb-rl)

測試瀏覽器:IE、QQ瀏覽器兼容模式
tb-rl:在div中和td中,從右向左寫,豎著寫,從容器的右側開始寫。(三項正常)
vertical-rl:div和td中,從左向右寫,橫著寫,從容器左側開始寫。(無效)

測試瀏覽器:QQ瀏覽器極速模式
tb-rl:div中,從右向左寫,豎著寫,從容器的右側開始寫。(三項正常)
vertical-rl:在div中,從左向右寫,豎著寫,從容器左側開始寫。(豎著正常,一項正常)
td中兩個值的效果都是:從左向右寫,橫著寫,從容器左側開始寫,中文日文 文字被旋轉,(都不正常)

測試瀏覽器:火狐
tb-rl:div中,從右向左寫,豎著寫,從容器的右側開始寫。(三項正常)
在td中,從右向左,豎著寫,在容器左側。(豎著,和從右向左兩項正常)
vertical-rl:在div和td中,從左向右寫,豎著寫,從容器左側開始寫。(豎著正常,一項正常)

測試結果:就測試的幾個瀏覽器和自己瀏覽器的當前版本來說,tb-rl在div中效果都是一致的。中文和英文的文字方向不同,因為一般就亞洲字有垂直寫法。

測試代碼:

<div style="width:400px;height:100px;background:#8ee09f;">
div中文まで
<br>LODOP勞道譜
</div>
<div style="width:400px;height:100px;background:#8ea5e0;writing-mode:tb-rl;">
div中文まで
<br>LODOP勞道譜
</div>
<div style="width:400px;height:100px;background:#dd8ee0;writing-mode:vertical-lr;">
div中文まで
<br>LODOP勞道譜
</div>
<table border=1>
<tr>
   <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで<br>LODOP勞道譜</td>
</tr>
<tr>
   <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで<br>LODOP勞道譜</td>
</tr>
</table>

 圖示:就測試的幾個瀏覽器和自己瀏覽器的當前版本來說,tb-rl在div中效果都是一致的,且tb-rl在IE和兼容模式里,在td里也和div中效果一樣。

在qq瀏覽器兼容和極速模式下測試了下在div中居中的垂直的文字,結果也是tb-rl在qq瀏覽器兼容和極速里都正常,加上行高等后,在qq兼容模式里,vertical-rl在div里顯示有問題,加了行高后就是水平的了文字跑到了下面。
測試代碼:

<div style="width:400px;height:100px;background:#8ee09f;text-align:center;line-height:100px;">
div中文まで
</div>
<div style="width:400px;height:100px;background:#8ea5e0;text-align:center;line-height:400px;writing-mode:tb-rl;">
div中文まで
</div>
<div style="width:400px;height:100px;background:#dd8ee0;text-align:center;line-height:400px;writing-mode:vertical-lr;">
div中文まで
</div>
<table border=1>
<tr>
   <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで</td>
</tr>
<tr>
   <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで</td>
</tr>
</table>

圖示:

 


該文章在 2023/9/28 1:18:50 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved