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

时间:2018-05-31 20:50:41

标签: html css css3

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

6 个答案:

答案 0 :(得分:2)

您正在寻找分词属性。

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:1)

<强>信用卡 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>

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

这应该达到你正在寻找的效果:)

答案 5 :(得分:0)

根据Mozilla开发人员的参考:

  

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

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