【CSS】段落文字实现两端对齐，不满一行则不需要

最新推荐文章于 2023-03-27 22:23:20 发布

mirror_Mx

最新推荐文章于 2023-03-27 22:23:20 发布

阅读量631

点赞数

分类专栏： HTML&CSS 文章标签： css

原文链接：https://www.haorooms.com/post/css_liangduan_justify

版权

HTML&CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求

混合使用汉字和英文的段落默认如下：

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(" ");