手機強制換行 - 目前它將單詞分爲兩半

Question

我們最近更新了網站。較新的看起來更好的形式等 但是，新設計有一個問題，我不能解決：

標題不能正確顯示在手機上。而且通過適當我的意思是換行發生在一個字像中間：
「內容Intelligen
E」
或者：
「管理軟件
牛逼團隊」
或者：
「區分
d麻省理工
Y」

下面是截圖它看起來如何在網站上：http://prntscr.com/d60i8i

我已經嘗試了不同的方法來抵消這個，但他們都沒有工作。 下面是詳細信息：

顯示：塊分割成顯示：內聯

@media (max-width: 560px) { 
.rwd-line {display: block;} 
} 
@media (min-width: 560px) { 
.rwd-line {display: inline;} 
} 

---

字斷方法

-ms-word-break: break-all; 
word-break: break-all; 
word-break: break-word; 

---

ö verflow方法

word-wrap: break-word; 
overflow-wrap: break-word; 

---

這是我不得不嘗試。 舉一個例子，你可以檢查這個頁面：http://www.idioplatform.com/about/
你會在這裏有幾個頭條新聞在手機上有這個問題。

你能幫我解決這個問題嗎？ 這感覺我已經沉迷於這個比它應得的更多的時間，但現在我決定以某種方式糾正它。

任何幫助，如果非常感謝！

Answer 1

一個小絕招的，因爲它似乎一切不工作的問題： 插入Word

h2 span::before { 
content: "\A"; 
white-space: pre; 
} 

Answer 2

在媒體查詢使用前力線被突破：

.rwd-line { 
overflow-wrap: unset; 
word-break: unset; 
} 
.rwd-line span { 
display:inline-block; 
}