Html 使用css拆分/包装长单词

我有一个div，它是页面的宽度。我希望在这个div中有一个很长的单词被打断和包装，这样所有的内容都会显示在屏幕上并且不会溢出/宽度永远不会超过100%

我试过

overflow-wrap:break-word但这似乎不起作用

谢谢


.container{最大宽度：100%；
利润率：0.20px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
float:none；}
h1{文本对齐：居中；
字号：800；
填充：0px 20px；
颜色：#bec0ca；
字体大小：4.0rem；
线高：1.2；
字母间距：-.5rem；
字号：800；
填充：0px 40px；
最大宽度：100%；
溢出换行：断开word；}

这是世上最长的字眼，也是为什么这项工作最长的字眼。
如果您想通过浏览器执行此操作，则必须将连字符添加到“自动”

如果您想手动执行此操作

请参阅我的更新：


.container{
最大宽度：100%；
利润率：0.20px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
浮动：无；
边框：1px纯灰；
}
h1{单词换行：断开单词；
/*您可以按h1的宽度拆分单词*/
宽度：250px；
}

这是世上最长的字眼，也是为什么这项工作最长的字眼。
信用卡


.css

.container { max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none; }

h1 { text-align: center;
font-weight: 800;
padding: 0px 20px;
color: #bec0ca;
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.5rem;
font-weight: 800;
padding: 0px 40px;
max-width: 100%;
overflow-wrap: break-word;}

.breakword {

        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;

    }

.html

<div class="container breakword">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>


这是世上最长的字眼，也是为什么这项工作最长的字眼。
您正在查找word break属性

此外，如果您想控制单词在html中的位置，请查找
标记


.container{最大宽度：100%；
利润率：0.20px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
float:none；}
h1{文本对齐：居中；
字号：800；
填充：0px 20px；
颜色：#bec0ca；
字体大小：4.0rem；
线高：1.2；
字母间距：-.5rem；
字号：800；
填充：0px 40px；
最大宽度：100%；
单词break:break all；}

这是世上最长的字眼，也是为什么这项工作最长的字眼。
您可以添加
单词break:break all但它会将内容推到左侧


.container{
最大宽度：100%；
利润率：0.20px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
浮动：无；
}
h1{
文本对齐：居中；
字号：800；
填充：0px 20px；
颜色：#bec0ca；
字体大小：4.0rem；
线高：1.2；
字母间距：-.5rem；
字号：800；
填充：0px 40px；
最大宽度：100%；
溢出包装：断开单词；
单词break：打破一切；
}

这是世上最长的字眼，也是为什么这项工作最长的字眼。

这应该可以达到您想要的效果：）
根据Mozilla开发者参考：

overflow wrap CSS属性指定浏览器是否
应在单词内插入换行符，以防止文本
溢出其内容框

使用overflow wrap并将属性的值设置为“break word”
您的代码片段无法执行事件？工作非常完美-如果您只想“wrap”，我将把它放到JSFIDLEh1->你应该把连字符：auto放到你的h1 csseven中，它不会做op要求的事情…你可能想看看，因为它有两个不同的CSS解决方案。你的容器的宽度从未设置过，所以它不会打断单词。啊，在你+1:Pwhy发布两个答案后一分钟？只保留一个带有所需细节的，我想在我上一个评论中发布，但答案不同。阿杜。。。。。。好吧，我把它拿走
  .container {
  width: 300px;
  background-color: red;
  overflow-wrap: break-word;
  word-wrap: break-word;
}