居中的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內的文字包裝不起作用

回答

相關問題