在移动设备上强行换线 - 目前它将一半的话打破了

Question

我们最近更新了我们的网站。更新看起来更好的形式等 然而，新设计有一个我无法解决的问题：

在移动设备上无法正确显示标题。正确地说，我的意思是换行发生在一个单词的中间，如：
“内容智能 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;

溢出方法

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

这就是我必须尝试的一切。 有关示例，您可以查看此页面：http://www.idioplatform.com/about/
您将在移动设备上看到几个标题。

你能帮我解决这个问题吗？ 我感觉自己已经沉没了更多的时间，但现在我决心以某种方式纠正它。

任何帮助，如果非常感谢！

Answer 1

你的问题有点巧妙，但似乎其他一切都不起作用： 在单词

之前插入一个强制换行符

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

Answer 2

只需在媒体查询中使用：

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