【CSS】段落文字實現兩端對齊,不滿一行則不需要
需求
混合使用漢字和英文的段落預設如下:
var str="你好,我的名字是mirror,nice to meet you!你今天很漂亮,很美麗哦~ 你最近在幹什麼呀?忙不忙?"
純中文的情況:
var str="你好,我的名字是米拉,很高興見到你!你今天很漂亮,很美麗哦~ 你最近在幹什麼呀?忙不忙?"
可以看出在中英混合的情況下,右側出現文字沒有對齊的情況。
實現思路
一般的兩端對齊是使用text-align:justify,但是text-align:justify一般情況下只針對英文管用。(因為css是老外設計的,老外在justify判斷的時候,是根據單詞直接的空格來的,中文兩個漢字之間沒有空格,所以大部分情況下text-align:justify不管用,所以這個屬性大部分形同虛設!)。
解決辦法
jQuery
$(DOM).css({"text-align":"justify","letter-spacing":"-0.15em"});
$(DOM).html()=$("DOM").html().replace(""," ")
-0.15em這個值可以指定,根據你當前的實際情況來設定。
JavaScript
var box=document.getElementById("haorooms");
box.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");
相關文章
- css文字兩端對齊CSS
- 【小技巧】CSS文字兩端對齊CSS
- 用css怎麼實現兩端對齊?CSS
- 探索發現:CSS實現中文兩端對齊CSS
- css 表單標籤兩端對齊CSS
- 用css實現兩端對齊text-align: justify有什麼不足之處?CSS
- CSS文字水平居中對齊CSS
- text-align:justify 兩端對齊
- CSS文字框與驗證碼垂直對齊CSS
- linux對齊文字Linux
- CSS段落首字元縮排兩個字元CSS字元
- CSS段落開頭縮排兩個漢字CSS
- css一行顯示文字CSS
- canvas textAlign 文字對齊Canvas
- WPS/Word中公式與文字不對齊的問題公式
- form表單元素名稱兩端對齊代ORM
- css居中對齊大全CSS
- CAD表格文字對齊方式
- 【WEB基礎】HTML & CSS 基礎入門(3)段落及文字WebHTMLCSS
- 移動端頁面不滿一屏時如何實現滿屏背景?
- css使用transform垂直對齊CSSORM
- CSS居中對齊終極指南CSS
- 如何讓文字居右對齊,換行後又居左對齊
- word中怎麼解決英文對不齊 word英文對不齊的方法
- java實現兩個文字相似度 simHash 實現Java
- CSS3實現文字垂直排列CSSS3
- CSS實現好看的文字漸變CSS
- CSS 小結筆記之解決flex佈局邊框對不齊CSS筆記Flex
- 純 CSS 實現多行文字截斷CSS
- CSS 實現文字"不定行數"截斷CSS
- CSS 設定元素第一行文字樣式CSS
- css實現動態陰影、蝕刻文字、漸變文字CSS
- CSS Tips——未知寬度高度居中對齊CSS
- css3實現文字線性漸變,css3實現背景漸變CSSS3
- SwiftUI 佈局之元件對齊實現上下對齊和水平居中 (教程含原始碼)SwiftUI元件原始碼
- leetcode 68. 文字左右對齊 模擬LeetCode
- C/C++記憶體對齊原則C++記憶體
- CSS題目系列(3)- 實現文字切割效果CSS