请教个CSS问题，在手机上，牛津9点击大图后，会把原本一行的词义隔成两行，怎么修改下css解决

[Kevin_G]

html+css+js.zip (392.9 KB)
附上了代码和图片，在电脑的欧路上没有问题，但是用在网页上预览，把网页拉小，也会出现这个问题。就像图片上这样，

[Kevin_G]

暂时通过js和css实现了想要的效果，但是想知道没有只通过修改css就能优雅实现相同效果的方法。
css添加代码：
ill-g.big-mode {
float: none !important;
margin: 10px auto !important;
}
js添加代码：
大图时：
// 找到最近的ill-g父元素并添加big-mode类
var illg = t.closest(‘ill-g’);
if (illg) {
illg.classList.add(‘big-mode’);
}
小图时：
// 找到最近的ill-g父元素并移除big-mode类
var illg = t.closest(‘ill-g’);
if (illg) {
illg.classList.remove(‘big-mode’);
}

[last_idol]

sn-g {
    display: block !important;
}

[Kevin_G]

好的，谢谢大佬。确实这么写就行了