How do I make text-overflow: Ellipsis does not influence the image

Asked

Viewed 76 times

0

I’m trying to create a Read more on my site, only when I put text-overflow: Ellipsis does not appear the reticence and it starts to crop the image.

.blog-home-content {

clear: both;
height: 100px;
padding-top: 10px;
padding-bottom: 0px;
width: 200px;    /* largura da imagem */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}



.blog-home-content img{

width: 200px;    /* largura da imagem */
height: 100px;   /*  altura da imagem  */
margin: 0 10px 10px 0;
}

https://i.stack.Imgur.com/Nfybb.png He is like this, cutting the letter and not showing the reticence, I want him to show the reticence. (preferably with a maximum of 3 lines)

foreach ($get_blog->get_blog_posts($per_page2, $lang_blog_more) as $post) {
echo "<div class='blog-home-entry'>\n";
echo "<h2 class='blog-title'><a href=\"blog-$post[0]-$post[3]\">$post[5]</a></h2>\n"; 
echo "<div class='blog-date'>".date($order, strtotime($post[2]))."</div>\n";


if ($blog_comments) {               
     echo "<div class='num_comments'><a href=\"blog-$post[0]-$post[3]#comments\">";
     if ($post[1]) { echo "($post[1]) $lang_blog_num_comment"; } else { echo $lang_blog_no_comment; }
     echo "</a></div>\n\n";
 }
 echo "<div class='blog-home-content'>$post[4]</div>\n"; 
 echo "<h2 class='read-more'><a href=\"blog-$post[0]-$post[3]\">$lang_blog_more</a></h2>\n";
 echo "</div>\n";
  • Add the corresponding snippet of HTML to the content of your question which will be easier for someone to help you. Images from current result vs expected result are also welcome.

  • Which browser did you try on? which font is using?

  • I am using the Arial font. and Chrome.

  • people, already solved, in the attempt in error, I created a ". blog-home-content p" and put display:flex; in the parent element.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.