word-wrap：断词；修复或替代

Question

With word-wrap: break-word; 如果这个词无论如何都要断，我不想先换行，它没用而且丑陋。如何避免这种情况？

示例：

给定一个 div 和 word-wrap: break-word; 和宽度等于这 23 个“x”字符，如下所示：

xxxxxxxxxxxxxxxxxxxxxxx

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

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

这是 div 的 innerHTML 的显示方式与 23"x" 宽度的预期方式。

会发生什么：
xx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxx

我想要的：
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxx

word-break: break-all; 和类似或更新的属性不是问题的解决方案。我不想要可以避免破裂的单词。我只希望宽度大于容器宽度的单词断开，但首先没有换行，就像 word-wrap: break-word; 一样，因为它既无用又丑陋。

Answer 1

正如@Sfili_81提到的那样

something like 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在长单词之前留下了一个白色的space/间隙，所以它没有适应。所以唯一的解决方案是 JS。在这个例子中，我们将 span 元素注入到长度超过 6 的文本中。

Answer 2

~~补充MaxiGui的答案。您还可以在 HTML 中使用 non-breaking space  （或将 space 替换为 non-breaking space with JS）。但我认为最好使用 word-break: break-all;~~

编辑：连字符完成所有工作 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

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 demo

word-wrap：断词；修复或替代

word-wrap: break word; fix or alternative

html

javascript

css

word-wrap