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 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?

回答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

回答2:

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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/31267749/truncate-text-for-dynamic-width-responsive-through-css