通过 CSS 截断动态宽度（响应式）文本

Question

在Fiddle 链接中，您可以看到包含一些内容的图像。我想要的是.g_container li strong应该用动态宽度截断，但现在它被隐藏了。它的宽度应该停止随着图像宽度的扩展。现在(3 dots) ...即使我使用 text-overflow:ellipsis 我也被隐藏并且不可见

.g_container li strong {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 10px 4px !important;
    line-height: 30px;
    color: #000;
    text-transform: uppercase;
    height: 30px;
    overflow: hidden;
    width:100px; 
    text-overflow: ellipsis;
    white-space: nowrap;
    background:yellow;
}

在更大的分辨率下，Lorem ipsum 文本（即黄色背景）看起来不错。但对于较小的分辨率，文本不会被截断，而是会被隐藏。

我遇到了很多与动态文本截断相关的问题，但与我的要求无关。

编辑：

我有横向和纵向格式的图像，但不知道图像的确切尺寸。对于景观图像没有问题。但对于纵向，空白区域会根据文本宽度而变化。有人可以帮我解决这个问题吗？

Answer 1

我想你只需要添加

display: block

到 .g_container li 强并改变

width: 100px

类似的东西

width: 100%

这是更新的小提琴