当浏览器大小更改时，如何使此列表不会断行？

Question

我正在尝试针对手机优化我的网站，但我无法得到这个＆＃34; ul＆＃34;为小型设备显示正确。当浏览器仍然足够大时，这就是页面的样子：

然后当浏览器处于最小宽度时：

你可以看到＆＃34;公司＆＃34;其中一个列表元素上的文本在窗口中不适合时会破坏该行。我希望文本以＆＃34; ...＆＃34;结尾。最后改为。我该如何实现这一目标？

<ul>
    <li><b><img class='icongo' src="worker67.png"/>Company:</b> <span style='float:right'>Legendary,Universal,Blizzard E</span></li>
    <li><b><img class='icongo' src="open163.png"/>Story:</b> Legendary’s "Warcraft" is a 3D epic adventure of world-colliding conflict based upon Blizzard Entertainment’s globally-renowned universe. Directed by Duncan Jones ("Moon," "Source Code") and written by Charles Leavitt and Duncan Jones, the film is a Legendary Pictures, Blizzard

点击http://www.comingsoon.net/movie/warcraft-2016#2AgLG7H8xtKTDjFb.99了解详情     

列表的当前css：

ul {
   margin: 0px;
   padding-left: 0px;
   list-style-type: none;
   width: 100%;
}
ul li {
   padding-bottom: 16px;
}

Answer 1

css媒体查询是可以在用户设备大小发生变化时更改的规则，例如您可以在您的情况下使用此查询：

@media(max-width: 400px) {
    ul li {
        font-size: 8px;
    }
}

但它不是标准方式，您应该阅读有关css media querires和响应式设计的更多信息

Answer 2

使用ul li { padding-bottom: 16px; word-break: break-word; }

<img/>

<强> jsFiddle Demo

请注意，请勿在{{1​​}}标记内插入<b>标记。正如你在例子中看到的，我移动了它们。