Question

我知道在这个网站上已经发布了相关的问题，但我仍然找不到合适的代码..我已经在网上搜索过，我找到了一些关于这个问题的正确答案。这个代码我用来强行打破一行

/* break long text without spaces */         
word-break: break-all;       
word-break: break-word;          
hyphens: auto;

我很好用长文本，问题已经用上面的代码解决了.. 但对于普通文本:(这个词不长，它仍然被分割）

If Mail notifications is check 
ed, you will receive notificat 
ions about any event that occu 
rs on the projects you belong to

**

这是我开始的链接 http://jsfiddle.net/y4Mdy/1802/

对不起，如果我的解释太模糊了。提前感谢所有回复的人：）

Answer 1

JS小提琴：http://jsfiddle.net/y4Mdy/1809/

如果我找到了你，你想打破所有空间并在以后显示它们吗？如果是这样，我有办法，希望这是你实际要求的：

<body>

  <div id="form" class="message-box">
    <div class="message-containter">
        If Mail notifications is checked, you will receive notifications about any event that occurs on the projects you belong to (issue added or edited, new document,...).
      </div>


      <div class="message right">
        dfsfsfsfsfddfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfsdfdfsfsfsfsfdsfsdfs
      </div>
    </div>


  </div>

 <br> <div id ="newdiv"></div>

</body>

JS：

<script type="text/javascript">

var getclass = document.getElementsByClassName("message-containter")[0].innerHTML;
var result = text(getclass);

function text(text){

    var arr = text.split("");

    for (var i = 0; i < arr.length; i++){ //loop through the array
        if (arr[i] !== " "){ //if there isn't a space
            var current = document.getElementById('newdiv');
            current.innerHTML = current.innerHTML + arr[i]; //write the letter
        }
    }


}

console.log(document.getElementById('newdiv').innerHTML); //the entire string

</script>

Answer 2

行为是因为word-break: break-all;因为它会破坏单词，即使它是连续的并且扩展了宽度。所以你可以简单地使用overflow-wrap: break-word。

有关此内容的更多信息What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

HTML：如何强制长文本中断

2 个答案: