居中的div内的文字包装不起作用

检查我的小提琴：https://jsfiddle.net/d7zjt408/1/

在正常格，自动换工作，因为它应该：

<div class="back" style="width: 100px; height: 100px; background-color: red;"> 
    <h4>Konsequentialismus</h4> 
</div>

然而，当我加入这个类，自动换行停止工作：

.centered { 
    display: flex; 
    align-items: center; 
    justify-content: center }

正如你可以在小提琴看到，在第二个div，“Konsequentialismus”这个词不破，在第一个div。谁能帮我？

来源

2017-10-14 Metaphysiker

你的话是对我的第二个div破罚款。这是否是您遇到问题的特定浏览器？ –

你可以在这里展示的'.centered'添加'word-break：break-word'：https：//jsfiddle.net/d7zjt408/2/ – UncaughtTypeError

我刚刚用firefox，chrome和opera查看了它，在每个浏览器中都没有被破解。你用什么浏览器查看它？ – Metaphysiker

你也可以使用这个不挠

.centered h4{ 
    text-align:center; 
position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); }

h4 { 
 
    word-wrap: break-word; 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    -o-hyphens: auto; 
 
    hyphens: auto; 
 
    text-align: left; 
 
} 
 

 
.centered h4{ 
 
    text-align:center; 
 
position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); }

<div class="back" style="width: 100px; height: 100px; background-color: red;"> 
 
    <h4>Konsequentialismus</h4> 
 
</div> 
 
<br> 
 

 
<div class="back centered" style="width: 100px; height: 100px; background-color: red;"> 
 
    <h4>Konsequentialismus</h4> 
 
</div>

来源

2017-10-14 15:07:45 Gattbha

居中的div内的文字包装不起作用

回答

相关问题