直播网址：http ://www.jungledragon.org/apps/jd3/lists
我正在开发一个响应式网站，并且在各种设备（主要使用 browserstack）上对其进行测试时，我遇到了一个似乎特定于 Android 2.3 浏览器的问题。
请在下面找到我想要完成的正确渲染。这就是它在几乎所有经过测试的浏览器上的工作方式和外观。我们正在查看的是一张照片列表，每张照片都有一个标题。标题由用户输入，可以是任意长度。左上角照片的标题很长，但正如您所见，它被正确截断了，为此我使用了 text-overflow:ellipsis CSS 属性。
这是同一页面在 Android 浏览器（2.3，使用 browserstack 模拟 Galaxy Note）上的外观：
如您所见，左上角的照片占据了我设置的 50% 以上，因此视图扩展了浏览器窗口。它肯定与长标题有关，因为如果我缩短它，视图确实很适合。
奇怪的是，我们确实看到了省略号效应，只是它以某种方式使用了比我指定的更多的宽度。
HTML结构如下（伪代码）：
<ul>
<li>
<figure>
<a href=""><img></a>
<figcaption><a href="">caption here</a></figcaption>
</figure>
</li>
</ul>
li 元素在 CSS 中应用了 50% 的宽度。省略号属性在 figcaption a 上设置。如前所述，Android 2.3 浏览器似乎确实应用了省略号，但它超出了我指定的 50% 宽度。我在html结构的各个级别都尝试了各种溢出属性，都无济于事。
当我在各个地方使用这种技术时，我非常渴望解决它。
注意：我在整个设计中都使用了边框框，尽管我认为这不是问题。