使用css断开/换行较长的单词
使用css断开/换行较长的单词
提问于 2018-06-01 04:50:41
我有一个div，它是页面的宽度。我希望在这个div中有一个很长的单词来拆分和换行，这样所有的内容都会显示在屏幕上，并且不会溢出/宽度永远不会大于100%。
我尝试过overflow-wrap: break-word;，但这似乎不起作用。
谢谢。
.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;}<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
回答 4
Stack Overflow用户
发布于 2018-06-01 04:53:30
如果您想要通过浏览器执行此操作，则必须将连字符添加到auto。
如果您想要手动执行此操作
请看我的更新：
.container {
max-width: 100%;
margin: 0 20px;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
border: 1px solid grey;
}
h1 { word-wrap: break-word;
/*you can split the words by the width of h1*/
width:250px;
}<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
Stack Overflow用户
发布于 2018-06-01 04:56:12
您正在寻找分词属性。
此外，如果您想控制单词在html中的换行位置，请查看<wbr>标记。
.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%;
word-break:break-all;}<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
Stack Overflow用户
发布于 2018-06-01 04:57:49
您可以添加word-break: break-all;，但它会将内容推到左侧？
.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;
word-break: break-all;
}<div class="container">
<h1> this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.</h1>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50632590
复制相关文章
相似问题