css實(shí)現(xiàn)文字豎排的方式

BakerJ 發(fā)布于2019-08-30 11:16 / 1088人閱讀

摘要：中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時(shí)候需要加上這句，自動(dòng)換行說明實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。

html中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。

單行文字豎向排列

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/
    word-break:break-all;
}

說明：實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。

多行文字豎向排列

.two{ ?
? ? margin: 0 auto; ?
? ? height: 140px; ?
? ? writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/ 
? ? writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/ ?
}

說明：高度很重要，如果需要控制文字的間距和行距，可以添加屬性letter-spacing和line-height。

擴(kuò)展：豎排文字動(dòng)畫顯示效果（文字從上到下動(dòng)畫顯示出來）

end~~~
如有更好方法，歡迎大家留言討論，謝謝！！

GPU云服務(wù)器云服務(wù)器文字豎排 php文字豎排互聯(lián)網(wǎng)專線的接入實(shí)現(xiàn)方式 css引入方式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114888.html

相關(guān)文章

css實(shí)現(xiàn)文字豎排的方式

摘要：中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列英文的時(shí)候需要加上這句，自動(dòng)換行說明實(shí)現(xiàn)文字單行豎向排列，只需要把寬度設(shè)置為剛好容納一個(gè)字體的寬度即可。 html中文字的默認(rèn)排列是橫向排列的，但一些特殊情況下是需要文字豎向排列的。單行文字豎向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...

wdzgege 2019-08-02 15:26 評(píng)論0 收藏0
H5 canvas生成圖片并上傳文件轉(zhuǎn)成PDF下載canvas文字排版

摘要：將預(yù)覽的圖片上傳，后端生成，在管理系統(tǒng)中下載。技術(shù)要點(diǎn)文字排版設(shè)置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉(zhuǎn)成上傳這里根據(jù)后端協(xié)商，此處后端要求將圖片生成，并點(diǎn)擊批量下載實(shí)現(xiàn)步驟文字排版在一般容器中，如果要實(shí)現(xiàn)文字的排版很容易。最近遇到一個(gè)業(yè)務(wù)需求，在小程序端定制預(yù)覽功能，并在預(yù)覽的圖片中使用指定的外部字體。將預(yù)覽的圖片上傳OSS，后端生成PDF，在管理系統(tǒng)中下載。但是………...

canopus4u 2019-08-23 18:24 評(píng)論0 收藏0
前端每日實(shí)戰(zhàn)：161# 視頻演示如何用純 CSS 創(chuàng)作一張紀(jì)念卓別林的卡片

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。在中增加一個(gè)元素，并把一句話分為段定位文字，并豎排段文字調(diào)整字號(hào)和字間距，使段文字對(duì)齊大功告成 showImg(https://segmentfault.com/img/bVbiCnk?w=400&h=301); 效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可...

HtmlCssJs 2019-08-29 17:03 評(píng)論0 收藏0
前端每日實(shí)戰(zhàn)：161# 視頻演示如何用純 CSS 創(chuàng)作一張紀(jì)念卓別林的卡片

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。在中增加一個(gè)元素，并把一句話分為段定位文字，并豎排段文字調(diào)整字號(hào)和字間距，使段文字對(duì)齊大功告成 showImg(https://segmentfault.com/img/bVbiCnk?w=400&h=301); 效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可...

Integ 2019-08-02 11:47 評(píng)論0 收藏0