CSS技巧：如何實現文本兩端對齊排版

在網頁設計中，排版是前端工程師不可避免的問題之一，如何讓文本按照一定的規則排列是我們需要解決的問題。本文將介紹如何通過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);

以上代碼實現了文本拆分成單詞，通過計算每一個單詞的寬度得出每一行需要填充的空格數量，從而實現文本兩端對齊的效果。