Truncate text for dynamic width (Responsive) through CSS

Question

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;
}

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.

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

Edit:

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?

I don't think there is a way in CSS to dynamically change the overflow width. You must specify a width or max-width. You can however use media queries to change those widths at different views. The alternative option is character counting using JavaScript, but it's not foolproof unless you're using a mono spaced font. — Paul Redmond, Jul 07 '15 at 11:55
I tried 100px width already for that heading. you can see in my code, still ellipsis is not working. — G.L.P, Jul 07 '15 at 11:57
Ah, because `strong` is an inline element. You need to make it `inline-block` or `block` level. — Paul Redmond, Jul 07 '15 at 12:00

score 4 · Accepted Answer · answered Jul 07 '15 at 11:59

4

I think you just need to add

display: block

to .g_container li strong and change

width: 100px

to something like

width: 100%

here is the updated fiddle

answered Jul 07 '15 at 11:59

Agnes D

431
2
12

yup in fiddle, its working while adding the smae code, its not working in my page.. will cross check. Anyhow thanks dude :) +1 for demo – G.L.P Jul 07 '15 at 12:09

score 2 · Answer 2 · answered Jul 07 '15 at 12:01

strong is an inline element. You need to make it inline-block or block level.

.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: 72px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: yellow;
  display: block;
}

score 2 · Answer 3 · answered May 30 '20 at 05:28

This worked for me

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

Adding position:absolute to the parent container made it work.

Himesh Aadeshara · Answer 4 · 2015-07-07T12:54:59.640

Hi dude you may try this

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

css3 supports awesome feature of giving width in vw

for more details of vw follow link you can refer or google it out

https://css-tricks.com/viewport-sized-typography/

here is what i tried in hurry but it can be lot more changes for perfection to polish it dude

.g_container {
 position: relative;
 margin: 25px auto 0px;
 padding-bottom: 25px;
 width: 96%;
 text-overflow: ellipsis;
 overflow-x: auto;
 white-space: nowrap;
}

.g_container *{
 /*white-space: normal !important;
 word-break: break-all;*/

}
.g_container li { display: table-cell; }
.g_container li:first-child .g_grid { margin: 0 15px 0 5px; }
.g_container li .g_grid {
 position: relative;
  background: #fff !important;
  height: 500px;
  max-width: 40vw;
  width: 30vw;
  border: 1px solid rgba(34,25,25,0.4);
  display: inline-block;
  vertical-align: top;
  text-align: center;
  overflow: hidden;
  background: #fff !important;
  margin: 0 18px; 
}
.g_container li .g_grid p, .g_grid .gmeta { 
 overflow: auto; 
 clear: both;
 display: block;
 white-space: normal !important;
 word-break: break-all;
}
.g_container li .g_grid p {
  height: 10em;
  overflow: hidden;
  text-align: left;
  padding: 0.5em;
  word-wrap: normal;
  word-break: break-word;
}
.g_container li strong {
 text-align: center;
 font-size: 13px;
 font-weight: bold; 
 line-height: 30px;
 color: #000;
 text-transform: uppercase;
 height: 30px;
    overflow: hidden;
 width:100px; 
    text-overflow: ellipsis;
 white-space: nowrap;
    background:yellow;
}
.g_grid .gmeta {
 text-align: right !important;
 color: #777;
 font-style: italic;
    padding-right: 4vh;
}

.gimgholder {
 position: relative;
    max-height:250px;
    max-width:250px;
 margin: 0 auto !important;
 background: #fff;
}

.g_container li .gimgholder img { 
 width : 80%;
 max-width: 100%;
}

I want to fix content width dynamically according to image width, now its getting expanded and getting blank space on sides of the image :( — G.L.P, Jul 07 '15 at 12:26
hi then you may need to change **.g_container li .g_grid** max-width so and one thing i would like to suggest is that don't change the content's width as per image's width instead of that just resize your width as per container's div as what you are doing now — Himesh Aadeshara, Jul 07 '15 at 12:38

Truncate text for dynamic width (Responsive) through CSS

4 Answers4

Linked