通过CSS截断文本以获取动态宽度(自适应) [英] Truncate text for dynamic width (Responsive) through CSS

问题描述

在 小提琴链接 中，您可以看到带有某些内容的图像.我想要的是 .g_container li strong 应该以动态宽度被截断，但是现在它被隐藏了.其宽度应停止随图像宽度扩展.现在我被隐藏了，即使我使用text-overflow:省略号

In the Fiddle link, you can see image with some content. What I want is .g_container li strong should get truncated with dynamic width but now its getting hidden. Its width should stop spreading with image width. now I gets hidden and (3 dots) ... were not visible even if I use 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文本(即带有黄色背景)看起来很好.但是对于较小的分辨率，文本不会被截断，而是会被隐藏.

In bigger resolution, the Lorem ipsum text (ie. with yellow background) looks fine. But for smaller resolutions, text does not get truncated instead getting hidden.

我遇到了许多与动态文本截断有关的SO问题，但与我的要求无关.

I went through lot of SO questions related to dynamic text truncation, but nothing is related with my requirement.

我有横向和纵向格式的图像，但不知道图像的确切尺寸.对于ladscape图像，没有问题.但是对于肖像，根据文本的宽度会出现空白.有人可以帮我解决这个问题吗?

I have images in both landscape and portrait formats and don't know exact dimensions of the images. For ladscape images there is no problem. but for portrait, empty white space is coming according to text width. Can someone help me to solve this issue?

推荐答案

我认为您只需要添加

display: block

更改为.g_container li并更改

to .g_container li strong and change

width: 100px

类似

width: 100%

这是更新的小提琴

这篇关于通过CSS截断文本以获取动态宽度(自适应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！