CSS, Flexbox, Tailwind-CSS, text-nowrap

Question

I am trying to make a WhatsApp web clone using next.js and tailwind CSS and working on a chat card. But I am getting it when trying to keep the message in one line and replace the excess text with "...".

One way is trying to fix the width of the message element but I want it to be more responsive and change where to put three dots depending on screen size. I also tried without fixed width in that case it changes the width of the parent element and starts overflowing with

{overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}

(https://i.sstatic.net/Y7mu9.png) This with fixed width but as you can see it doesn't expand with screen size.

(https://i.sstatic.net/WIOM5.png) And when I don't specify a fixed width it overflows the parent container even with truncate utility class

Following is my code of the component:

import Image from "next/image";
import React from "react";

const Chatcard = () => {
  return (
    <>
      <div className="flex py-2 bg-[#111b21]">
        <div className="shrink-0 h-[49px] w-[49px] relative ml-[13px] mr-[15px]">
          <Image
            src={"/profile_pic.jpg"}
            alt={"profile Pic"}
            fill
            className="rounded-full object-cover"
          />
        </div>
        <div className="flex-1 flex-col pr-[15px]">
          <div className="flex items-center justify-between">
            <p>trainwithrc</p>
            <p className="text-xs text-[#8696a0]">9/11/2023</p>
          </div>
          <div className="text-sm text-[#8696a0] w-[15rem] truncate">
            Arms ko lock rkho elbow pr extension nhi honi chahiye bilkul bhi
          </div>
        </div>
      </div>
    </>
  );
};

export default Chatcard;

I am trying to fix this problem since last 2 days, and feel so struck. Any help is so much appreciated. Thank you for your valuable time. When using width in percentage it wraps the text in correct manner and text wrapping becomes responsive but the parent flex container still shifts out: here's a pic: This is pic when percentage width is used

Answer 1

import Image from "next/image";
import React from "react";

const Chatcard = () => {
  return (
      <div className="flex items-center gap-[15px] pl-[13px] pr-[15px]">
        <div className="w-[49px] aspect-square shrink-0 relative">
          <Image
            src={"/profile_pic.jpg"}
            alt={"profile Pic"}
            fill
            className="rounded-full object-cover"
          />
        </div>
        <div className="flex-1 flex-col overflow-auto py-3 border-b border-[#8696a026]">
          <div className="flex items-center justify-between">
            <p className="text-[]">trainwithrc</p>
            <p className="text-xs text-[#8696a0]">9/11/2023</p>
          </div>
          <div className="flex items-center overflow-auto">
            <p className="text-sm text-[#8696a0] truncate">Arms ko lock rkho elbow pr extension nhi honi chahiye bilkul bhi</p>
          </div>
        </div>
      </div>
  );
};

Since the

element itself is working fine with truncate, it changes the width of the entire parent container. So, we need an overflow property on the parent to handle it as you can see in the code snippet and it will fix the issue.