Javascript HTML：如何强制长文本中断_Javascript_Html_Css

Javascript HTML：如何强制长文本中断

javascript html css

Javascript HTML：如何强制长文本中断,javascript,html,css,Javascript,Html,Css,我知道这个网站上已经发布了相关的问题，但是我仍然找不到正确的代码。。我已经在网上搜索了一下，找到了一些关于这个问题的正确答案。这是我用来强制换行的代码 /* break long text without spaces */ word-break: break-all; word-break: break-word; hyphens: auto; 我同意长文本，问题已经用上面的代码解决了。。但对于普通文本：（虽然单词没有那么长，但仍然被拆分

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

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

我同意长文本，问题已经用上面的代码解决了。。但对于普通文本：（虽然单词没有那么长，但仍然被拆分）

这是我开始的链接

对不起，我的解释太模糊了。

提前感谢所有回复的人：）

这种行为是因为

单词break:break all因为它会打断单词，即使它是连续的并扩展了宽度。因此，您可以简单地使用溢出包装：break word

欲了解更多信息，请阅读JS fiddle：
如果我没弄错的话，你想打破所有的空格，以后再显示吗？如果是这样，我有办法，希望这就是你真正想要的：
<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>


如果选中“邮件通知”，则您将收到有关您所属项目上发生的任何事件的通知（添加或编辑的问题、新文档等）。
DFSFSFSFDFSFSFDFSFSFDFSFSFDFSFFSFSFSFSFSFDSFSFDFDFSFFSFSFSFSFSFDSFSFSDFSDFSFFSFSFSFSFSFSFDSFSDFSDFFSFSFSFSFSFSFDFSDFFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSFSFSDFFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSFSfsdfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfdfsfsfsfsfsfsfsfsfdfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsfsf



JS:

var getclass=document.getElementsByCassName（“消息容器”）[0].innerHTML；
var结果=文本（getclass）；
函数文本（文本）{
var arr=text.split（“”）；
对于（var i=0；i您想要的行为是什么？当我打开JSFIDLE并调整宽度时，文本中的单词不会被拆分（就像应该的那样，对吗？）我不希望短单词被拆分，而是只会转到下一行。您提供的演示没有显示问题-基于上面的示例..在到达选中的单词时不是创建新行。。。它被拆分，使它成为两个单词（检查，编辑）CSS无法检测长或短单词…它只能做你告诉它的事情。你必须选择你需要的行为。太好了！
<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>

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