自动换行：打破单词；修复或替代

编程问答 2022-08-11

问题描述

使用自动换行：break-word; 如果单词反正要换行，我不希望先换行，这是无用且丑陋的。如何避免这种情况？

示例：

使用自动换行：断行； 给出一个div，其宽度等于23个“ x”字符，如下所示：

xxxxxxxxxxxxxxxxxxxxxxxxxx


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

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>


这是div的innerHTML的显示方式以及尊重23“ x”宽度的方式。

会发生什么：
xx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxx

我想要的是
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxx



断字：全部中断和类似或更近的属性不能解决此问题。我不希望能避免折断的词。我只希望宽度大于容器宽度的单词先中断BUT而不换行，就像 word-wrap：break-word; 一样，因为它根本没用而且很丑。

解决方法

补充MaxiGui的答案。您还可以在HTML中使用不间断空格&nbsp;（或用JS将不间断空格替换为空格）。 但我认为最好使用word-break: break-all;

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

,

@ 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的文本中。

,

使用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

htmljavascriptword-wrap