Html - Text wrap does not respect aspect ratio

Novice
December 20, 2024
193 views
0 votes
2 Answers

I am trying to create testimonial. There is a testimonial container that contains three direct child div profile-image, name and feedback. The testimonial div is flexbox and its direction is column. I have set flex-grow:1 for the feedback to consume all the available of the parent div i.e. testimonial container. I wanted my feedbacks to be wrapped and overflow should be handled with ellipsis while preserving the aspect ratio of parent div. But this is not working, instead the div height grows whenever the moment text overflow happens.

        body{
            margin: 0px;
            padding: 0px;
        }

        .testimonial-container{
            width: 300px;  
            aspect-ratio: 4/5;
            margin: 2px;
            padding-top: 20px;
            border: 1px solid red;
            display: flex;
            flex-direction: column;
        }

        .testimonial-container .profile-image{
            margin-top: 20px;
            text-align: center;
        }

        .testimonial-container .profile-image img{
            height: 80px;
            width: 80px;
            clip-path: circle(50%);
            object-fit: cover;
        }

        .testimonial-container .name{
            color: orange;
        text-align: center;
        }

        .testimonial-container .feedback{
            flex-grow: 1;
            text-align: center;
            text-overflow: ellipsis;
            background-color: rgb(166, 199, 170);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonials</title>
</head>
<body>
    <div class="testimonial-container">
        <div class="profile-image ">
            <img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
        </div>
        <div class="name text-center mt-3 fw-bolder">Name</div>
        <div class="feedback">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure, dicta ratione vero doloribus facere aspernatur laborum, illum at mollitia quia corrupti quidem sequi obcaecati animi aut. Adipisci fugiat, quod earum iusto quae, omnis odio labore ex laudantium consequatur dolor! Quod maiores quidem numquam ex ab ratione omnis rem praesentium, debitis placeat tenetur iusto sapiente commodi vitae unde mollitia quae ea, facilis saepe provident ipsum laboriosam similique ipsa? Aliquam et, voluptates neque quo, laboriosam alias nemo molestias fugiat suscipit obcaecati nulla nam omnis quam perferendis dolorum cupiditate provident dolore! Quo nemo id accusantium natus. Voluptate harum, ratione id totam quas eum amet nostrum alias obcaecati officiis qui perspiciatis itaque ullam adipisci repellat veniam eius ipsam vitae beatae eaque eligendi, omnis, deleniti cumque laboriosam! Eius maxime dicta quod ex libero natus sit quam totam voluptate, nam eligendi! Quasi ullam numquam ut doloribus quis ipsam, perferendis tempora ducimus natus cumque facilis deserunt.
        </div>
    </div>
</body>
</html>

Tags: css html

Answers

text-overflow is only intended for one-line text. Nowadays you can use these parameters:

-webkit-box-orient: vertical;
-webkit-line-clamp: 6;

In this case you need to define a value for -webkit-line-clamp, i.e. the number of lines. With the aspect ratio, font-size, image size etc. in your example, 6 would be a value that works, but you can of course change it to whatever fits your need, using trial and error for finding out:

body {
  margin: 0px;
  padding: 0px;
}

.testimonial-container {
  width: 300px;
  aspect-ratio: 5/4;
  margin: 2px;
  padding-top: 20px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.testimonial-container .profile-image {
  margin-top: 20px;
  text-align: center;
}

.testimonial-container .profile-image img {
  height: 80px;
  width: 80px;
  clip-path: circle(50%);
  object-fit: cover;
}

.testimonial-container .name {
  color: orange;
  text-align: center;
}

.testimonial-container .feedback {
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  text-align: center;
  background-color: rgb(166, 199, 170);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonials</title>
</head>

<body>
  <div class="testimonial-container">
    <div class="profile-image ">
      <img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
    </div>
    <div class="name text-center mt-3 fw-bolder">Name</div>
    <div class="feedback">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure, dicta ratione vero doloribus facere aspernatur laborum, illum at mollitia quia corrupti quidem sequi obcaecati animi aut. Adipisci fugiat, quod earum iusto quae, omnis odio labore ex laudantium consequatur dolor! Quod maiores quidem numquam ex ab ratione omnis rem praesentium, debitis placeat tenetur iusto sapiente commodi vitae unde mollitia quae ea, facilis saepe provident ipsum laboriosam similique ipsa? Aliquam et, voluptates neque quo, laboriosam alias nemo molestias fugiat suscipit obcaecati nulla nam omnis quam perferendis dolorum cupiditate provident dolore! Quo nemo id accusantium natus. Voluptate harum, ratione id totam quas eum amet nostrum alias obcaecati officiis qui perspiciatis itaque ullam adipisci repellat veniam eius ipsam vitae beatae eaque eligendi, omnis, deleniti cumque laboriosam! Eius maxime dicta quod ex libero natus sit quam totam voluptate, nam eligendi! Quasi ullam numquam ut doloribus quis ipsam, perferendis tempora ducimus natus cumque facilis deserunt.
    </div>
  </div>
</body>

</html>

P.S.: Check here for browser compatibility – looks good: https://caniuse.com/?search=webkit-line-clamp

I have removed aspect ratio and added below code for .testimonial-container .feedback.

display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;

Please check the browser support for these properties.

body{
            margin: 0px;
            padding: 0px;
        }

        .testimonial-container{
            width: 300px;  
            margin: 2px;
            padding-top: 20px;
            border: 1px solid red;
            display: flex;
            flex-direction: column;
        }

        .testimonial-container .profile-image{
            margin-top: 20px;
            text-align: center;
        }

        .testimonial-container .profile-image img{
            height: 80px;
            width: 80px;
            clip-path: circle(50%);
            object-fit: cover;
        }

        .testimonial-container .name{
            color: orange;
        text-align: center;
        }

        .testimonial-container .feedback{
            flex-basis: 1;
            text-align: center;
            background-color: rgb(166, 199, 170);
            
            display: -webkit-box;
            max-width: 100%;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonials</title>
</head>
<body>
    <div class="testimonial-container">
        <div class="profile-image ">
            <img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
        </div>
        <div class="name text-center mt-3 fw-bolder">Name</div>
        <div class="feedback">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure, dicta ratione vero doloribus facere aspernatur laborum, illum at mollitia quia corrupti quidem sequi obcaecati animi aut. Adipisci fugiat, quod earum iusto quae, omnis odio labore ex laudantium consequatur dolor! Quod maiores quidem numquam ex ab ratione omnis rem praesentium, debitis placeat tenetur iusto sapiente commodi vitae unde mollitia quae ea, facilis saepe provident ipsum laboriosam similique ipsa? Aliquam et, voluptates neque quo, laboriosam alias nemo molestias fugiat suscipit obcaecati nulla nam omnis quam perferendis dolorum cupiditate provident dolore! Quo nemo id accusantium natus. Voluptate harum, ratione id totam quas eum amet nostrum alias obcaecati officiis qui perspiciatis itaque ullam adipisci repellat veniam eius ipsam vitae beatae eaque eligendi, omnis, deleniti cumque laboriosam! Eius maxime dicta quod ex libero natus sit quam totam voluptate, nam eligendi! Quasi ullam numquam ut doloribus quis ipsam, perferendis tempora ducimus natus cumque facilis deserunt.
        </div>
    </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Text wrap does not respect aspect ratio

Answers