word-wrap: 断字；修复或替代答案

【问题标题】：word-wrap: break word; fix or alternativeword-wrap: 断字；修复或替代
【发布时间】：2020-09-08 06:37:28
【问题描述】：

with word-wrap: break-word; 如果反正这个词要断了，我不想先换行，它没用而且丑陋。如何避免？

示例：

给定一个带有 word-wrap: break-word; 的 div，其宽度相当于这 23 个“x”字符，如下所示：

xxxxxxxxxxxxxxxxxxxxxxx

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

<div>xx xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>

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

会发生什么：
xx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxx

我想要什么：
xx xxxxxxxxxxxxxxxxxxxxx
xxxxxxxx

word-break: break-all; 和类似或更新的属性不能解决问题。我不要那些可以避免断断续续的话。我只希望宽度大于容器宽度的单词在没有换行符的情况下先中断，例如 word-wrap: break-word; 因为它根本无用且丑陋。

【问题讨论】：

类似word-break: break-all ; ?
使用纯 CSS，我不认为你可以，但我很高兴被证明是错误的。
这能回答你的问题吗？ How to force a line break in a long word in a DIV?
@Thomas - 好的。我只是想明确一点，没有纯 CSS 的答案也可以接受。
@Sfili_81 对不起，我混淆了 word-break: break-all ；和断词：断词；在我的最后一条评论中（已删除）。但是断词：break-all ;是系统地断词。我也不想要那个。我希望在没有换行符的情况下以任何方式中断的单词以及可以避免换行符的单词。

标签： javascript html css word-wrap

【解决方案1】：

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

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

【讨论】：

断词：break-all ;是系统地断词。我希望无论如何都会中断的单词在没有换行符的情况下中断，并且可以避免中断到换行符的单词。
然后你可以用一个不间断的空格替换你的长单词之前的空格。可能用 JS 你可以检测到这个词并自动替换
可能是要走的路。我有一个可调整宽度的聊天日志框。这意味着在每个日志中创建一个单词数组并验证每个单词的大小，然后删除或添加在前面
不是最好的解决方案，请检查浏览器兼容性。这就是我什至没有提供它的原因。
@MaxiGui 你是对的。此外，它似乎只符合 Mozilla 页面第一个示例中的问题要求。

【解决方案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;
}

&lt;div id="demo"&gt;test teeeeeeeeeeest test test test&lt;/div&gt;

PS：我仍然将问题标记为重复来自：How to force a line break in a long word in a DIV?

编辑

由于break-all 也破坏了整个文本/单词，而break-word 在长单词之前留出了一个空格/间隙，所以它不适应。所以唯一的解决方案是JS。在这个例子中，我们将 span 元素注入到长度超过 6 的文本中。

【讨论】：

断词：break-all ;是系统地断词。我希望在没有换行符的情况下以任何方式中断的单词以及可以避免换行符的单词。 ——
@111111111111 JS 解决方案给你
JavaScript 完全没有必要——这可以通过简单的 CSS 来完成：jsfiddle.net/fz63oyra
@James Whiteley 不，不是。看看你的小提琴是如何在 INSTEAD 之后的第二个单词换行和中断的，而不是直接中断。这正是我所说的我不想在我的问题中出现的内容。
@MaxiGui 我认为没有更好的方法。我很好奇为什么它不是自动换行的默认行为：break-word，我发现没有换行显然更优雅。

【解决方案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:break-word 一样。看看第三个长字是如何在换行之前换行的。问题在于避免这种换行。