How can I make the text in the <p> tag not wrap and hide its overflow?-CodePudding

Using tailwindcss, how can I make the first <p> child truncate (or at least have hidden overflow) as its container shrinks? Nothing that I do makes this work. The text always wraps even if I specify whitespace-nowrap, overflow-hidden or any other class.

The flex boxes themselves behave correctly. The first text shrinks and the second remains the same size as the inner-fb-one and inner-fb-two flex boxes shrink. The only thing that I cannot get to work is the text to not wrap and hide the overflow.

To c


    <div className='flex flex-row ml-3 space-y-1 items-end border' id='container-fb'>
      <div className='flex flex-row items-center' id='inner-fb-one'>
        <p className='whitespace-nowrap'>truncate this first child as the container shrinks</p>
        <p className='shrink-0'>keep this the same size</p>
      </div>
      <div className='flex flex-row items-center' id='inner-fb-two'>
        <p className='whitespace-nowrap'>truncate this first child as the container shrinks</p>
        <p className='shrink-0'>keep this the same size</p>
      </div>
    </div>

CodePudding user response：

<div className='flex flex-row ml-3 space-y-1 items-end border' id='container-fb'>
  <div className='flex flex-row items-center' id='inner-fb-one'>
    <p className='whitespace-nowrap text-overflow-ellipsis overflow-hidden w-full'>
      truncate this first child as the container shrinks
    </p>
    <p className='shrink-0'>keep this the same size</p>
  </div>
  <div className='flex flex-row items-center' id='inner-fb-two'>
    <p className='whitespace-nowrap text-overflow-ellipsis overflow-hidden w-full'>
      truncate this first child as the container shrinks
    </p>
    <p className='shrink-0'>keep this the same size</p>
  </div>
</div>

CodePudding user response：

To prevent the text in a

tag from wrapping and hiding its overflow, you can use the white-space: nowrap CSS property. Here's an example

<p style="white-space: nowrap;">This is some text that will not wrap and will hide its overflow.</p>

If you want to apply this style to multiple elements, you can define a CSS class and apply it to the

tags:

.no-wrap {

white-space: nowrap; }

This is some text that will not wrap and will hide its overflow.

Alternatively, you can use the overflow: hidden property to hide the overflow, like this:

<p style="overflow: hidden;">This is some text that will not wrap and will hide its overflow.</p>

You can combine these two properties to achieve the desired effect, like this:

<p style="white-space: nowrap; overflow: hidden;">

This is some text that will not wrap and will hide its overflow.