自動換行：斷詞； 修復或替代

Question

帶自動換行：斷字； 如果這個詞無論如何都要斷，我不想先換行，這是無用的和丑陋的。 如何避免這種情況？

例子：

給定一個帶有自動換行的 div : break-word; 寬度等於 23 個“x”字符，如下所示：

xxxxxxxxxxxxxxxxxxxxxxxx


div innerHTML 是“xx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”，如下所示：

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>   

這就是 div 的 innerHTML 的顯示方式與 23"x" 寬度所需的方式。

發生什么了：
xx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxx

我想要的是：
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxx

斷字：斷斷續續； 並且類似或更近的屬性不是問題的解決方案。 我不想要可以避免斷斷續續的詞。 我只希望寬度大於容器寬度的單詞在沒有換行符的情況下先打斷，就像word-wrap: break-word; 因為它根本沒用而且丑陋。

Answer 1

補充MaxiGui的答案。 您還可以使用不間斷空格  在您的 HTML 中（或用 JS 用不間斷空格替換空格）。 但我認為最好使用word-break: break-all;

編輯：連字符完成所有工作https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Answer 2

正如@Sfili_81 提到的那樣

類似於word-break: break-all;

干得好

 var txt = document.getElementById("demo").innerHTML; var dataArr = txt.split(' '); var paragraph = document.getElementById("demo"); var finalString = ""; for (var i = 0; i < dataArr.length; i++){ if (dataArr[i].length > 6 ) { finalString = finalString + " <span>"+ dataArr[i]+"</span>"; } else{ finalString = finalString + " " + dataArr[i]; } } paragraph.innerHTML = finalString;

 div{ width:50px; background: red; } span{ word-break:break-all; }

 <div id="demo">test teeeeeeeeeeest test test test</div>

PS：我仍然將問題標記為重復： How to force a line break in a long word in a DIV?

編輯

由於break-all也打破了整個文本/單詞，而break-word在長單詞之前留了一個空格/間隙，那么它就沒有適應。 所以唯一的解決方案是JS。 在這個例子中，我們將 span 元素注入到長度超過 6 的文本中。

Answer 3

使用 jQuery 的替代解決方案：

HTML：

<div id="demo">xx xxx xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx</div>

JS：

$(document).ready(function() {
  var words = $('#demo').text().split(' ');
  $('#demo').empty();
  $.each(words, function(i, v) {
    $('#demo').append($('<span>').text(v));
  })
});

CSS：

#demo {
  width: 100px;
  border: 1px solid #F00;
  word-wrap: wrap;
  word-break: break-all;
}

#demo span {
  display: inline-block;
  border: 1px dashed #00F;
  word-wrap: break-word;
  margin-right: 2px; /* add the space back */
}

此解決方案比公認的略好，因為它不需要字長的硬編碼值。

JSFiddle 演示