Question

我有一个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>

Answer 1

您正在寻找分词属性。

此外，如果您想控制html中单词的中断位置，请查找<wbr>标记。

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

如果您想通过浏览器执行此操作，则必须将连字符添加到自动。

如果你想手动完成它看到我的更新：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

<强>信用卡 https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

<强> JSFiddle

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

Answer 4

您可以添加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>

Answer 5

  .container {
  width: 300px;
  background-color: red;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

这应该达到你正在寻找的效果：）

Answer 6

根据Mozilla开发人员的参考：

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

使用overflow-wrap并将属性的值设置为“break-word”

使用css打破/包装一个长词

6 个答案: