在网页设计中，排版是前端工程师不可避免的问题之一，如何让文本按照一定的规则排列是我们需要解决的问题。本文将介绍如何通过CSS实现文本两端对齐排版。
一、单行文本两端对齐排版
单行文本排版模式比较简单，可以通过text-align:justify属性实现两端对齐。下面是示例代码：
p{
text-align:justify;
text-justify:distribute-all-lines;
}
上面的代码中，text-align:justify属性用于水平对齐文本，text-justify:distribute-all-lines用于让文本两端对齐。
二、多行文本两端对齐排版
对于多行文本排版，采用text-justify属性依然可以做到两端对齐，但是有些浏览器并不支持这个属性。另外，使用text-justify实现的两端对齐不会考虑单词的意义，这也可能会带来排版上的问题。
此时，我们可以采用CSS3新增的hyphens属性，通过断词实现两端对齐。下面是示例代码：
p{
text-align:justify;
-moz-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
}
使用hyphens:auto属性后，浏览器会自动根据单词的意义将文本进行分行和断词，使得文本更加美观。
三、弹性盒子实现文本两端对齐排版
CSS3中的弹性盒子模型可以更加方便地实现文本两端对齐。在弹性盒子中，只要设置对齐方式为justify-content:center，就可以实现文本两端对齐。下面是示例代码：
.box{
display:flex;
justify-content:center;
text-align:justify;
}
.box p{
flex: 1;
margin-right: 1rem;
}
上面示例中，设置了box的display属性为flex，justify-content属性为center，意味着box中的元素水平对齐方式是两端对齐。而内部的p元素是弹性盒子的一个子元素，flex属性为1表示按照弹性盒子模型进行布局，并将其右外边距设置为1rem，这样可以保证在文本中每个单词间距相等，看起来更加美观。
四、JavaScript实现文本两端对齐排版
如果以上方法都无法满足要求，那么我们可以用JavaScript实现文本两端对齐排版。实现方法是将一段文本分成多个词，然后通过JavaScript计算出将每一行的单词进行拉伸，使得每一行的单词间距相等，从而实现两端对齐。具体实现可以参考以下示例代码：
function justifyText(element, maxWidth) {
var words = element.innerHTML.split(' ');
//首先将文本拆分成多个单词
var longString = '';
for (var i = 0; i maxWidth) {
longString += '
' + word;
} else if (longString) {
element.innerHTML = justifyLine(longString.trim(), maxWidth);
longString = word;
} else {
longString = word;
}
}
if (longString) {
element.innerHTML = justifyLine(longString.trim(), maxWidth);
}
}
function justifyLine(line, maxWidth) {
var words = line.split(' ');
var numSpaces = words.length - 1;
var wordsWidth = 0;
for (var i = 0; i < words.length; i++) {
var clone = document.createElement('div');
clone.style.display = 'inline-block';
clone.style.visibility = 'hidden';
clone.innerHTML = words[i];
document.body.appendChild(clone);
var width = clone.offsetWidth;
document.body.removeChild(clone);
wordsWidth += width;
}
var totalSpaceWidth = maxWidth - wordsWidth;
var averageSpaceWidth = totalSpaceWidth / numSpaces;
var leftSpaces = numSpaces / 2;
var justifiedLine = '';
for (var i = 0; i < words.length; i++) {
justifiedLine += words[i];
if (i < words.length - 1) {
var numSpacesToInsert = i < leftSpaces ? Math.ceil(averageSpaceWidth) : Math.floor(averageSpaceWidth);
for (var j = 0; j < numSpacesToInsert; j++) {
justifiedLine += '';
}
}
}
return justifiedLine;
}
//使用
var element = document.getElementById('target');
var maxWidth = 200;
justifyText(element, maxWidth);
以上代码实现了文本拆分成单词，通过计算每一个单词的宽度得出每一行需要填充的空格数量，从而实现文本两端对齐的效果。
原创文章，作者：MSLV，如若转载，请注明出处：https://www.506064.com/n/146032.html
微信扫一扫 
支付宝扫一扫 