首页 文章

使用css打破/包装一个长单词[复制]

提问于
浏览 次
0

这个问题在这里已有答案：

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

6 回答

  • 1

    根据Mozilla开发人员的参考：

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

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

    回复于
  • 2

    你正在寻找关键词属性 .

    另外，如果你想控制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>
    回复于
  • 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>
    回复于
  • 1
    .container {
  width: 300px;
  background-color: red;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

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

    回复于
  • 0

    Credit 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>
    回复于
  • 1

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

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

    .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>
    回复于

相关问题