Change styles if content crosses first line Tailwind-CSS - reactjs

Question

I am making messaging app in which I want to create a message whose design looks like this in the following image
I want to have two types of layouts in my messages
If the message is about one line long then it's border-radius should be full // rounded-full
If the message is more then one line then it's border-radius should be md or sm // rounded-md
How can I achieve this design using Tailwind-CSS?

Answer 1

No, CSS can't use number of line as a CSS selector, and so it cannot make a decision in changing the style. ( There is line-clamp property in CSS which can truncates text at a specific number of lines, but I don't think it relates to this question. )
BUT, if you can render each line seperately, you can use css child selector to detect it and apply the tailwind class. Tailwind only provide first-child and last-child modifier so you may need to add extra stylesheet in order to do it.
You may also achieve it by checking the height of the div or counting the length of the words with JavaScript in react, then change the class accordingly.
Example
span:last-child {
#apply rounded-b-md;
}
span:first-child {
#apply rounded-t-md;
}
span:only-child {
#apply rounded-full;
}

Answer 2

I'm afraid the only way to achieve that is by using a little JS.
I guess you are using JS but I cannot guess if u are using some specific framework or library. Btw you need to do some calculations with JS to achieve this behavior. You can do something like:
const fontSize = 16px //default on html
const msgWidth = 50px
const chatMsg = document.querySelector('p.chatMessage-1')
const msg = chatMsg.innerText
chatMsg.classList.add(msg.length * fontsize > msgWidth ? 'border-md' : 'border-full')

Answer 3

One thing you can do is that you can change the styling on the basis of length of message. In one line if you have approx. 20 characters then,
if characters > 20: rounded-sm else: rounded-full
you can do like this.
<span className=`${message.length > 20 ? 'rounded-sm':'rounded-full' } text-base`>{message}</span>