html - 文字过长时，li 下的文字会乱七八糟

Question

我正在使用WordPress 的WooCommerce 插件来制作ecommerce store. 但我的问题是某些项目的标题超过 50-60 个字符。这样一来，产品的布局就搞砸了。在这里，我附上了布局的屏幕截图。请建议我在这里应该做什么？现场直播可以到这里。

更新

破碎的屏幕图像在这里

Answer 1

好吧，你有大约 3 个选项。

1. 什么都不做，忍受它
2. 约束li或h3高度并让它滚动/隐藏溢出。
3. 减少标题

第二个是将其添加到 css ：

div#content ul.products li.product {height:300px; overflow:auto;}

或者也可以添加这个：

div#content ul.products li.product h3 {height:1em;overflow:hidden}

数字 3 是关于根本没有长标题...
当您编写游戏标题时，请查看字符串长度是否大于您的限制，如果是，则仅打印一个 substr 并附加“...”。

我能想到另一种解决方案，但它有点复杂。取游戏标题长度并相应地缩小您的文本大小，直到某个阈值。