Truncate Text For Dynamic Width (responsive) Through Css

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

Solution 1:

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

Solution 2:

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

.g_containerlistrong{
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 8px10px4px!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;
}

Solution 3:

Hi dude you may try this

.g_containerlistrong{
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  padding: 8px10px4px!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_containerli { display: table-cell; }
.g_containerli:first-child .g_grid { margin: 015px05px; }
.g_containerli.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: 018px;	
}
.g_containerli.g_gridp, .g_grid.gmeta {	
	overflow: auto;	
	clear: both;
	display: block;
	white-space: normal !important;
	word-break: break-all;
}
.g_containerli.g_gridp {
  height: 10em;
  overflow: hidden;
  text-align: left;
  padding: 0.5em;
  word-wrap: normal;
  word-break: break-word;
}
.g_containerlistrong {
	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_containerli.gimgholderimg {	
	width : 80%;
	max-width: 100%;
}
	

Solution 4:

This worked for me

<divstyle="display: flex; position: absolute; width: 100%;"><divstyle="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.