I am looking to add padding to the last line of a padding element only. I have the following html using Tailwind classes:

<div className="my-3 max-h-[4.5rem] relative">
  <p ref={ref} className="inline-block line-clamp-3 pr-14">{data.description}</p>
  <button className="text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1" onClick={() => setOpen(true)}>
    more
  </button>
</div>

The padding right pr-14 is applied to the entire p tag. How can I get this to apply to only the last line? I have tried block, inline etc and none of them seem to make a difference. Is this possible in CSS?

For context, I am trying to add padding to the last line when I need to show a "more" button. The only alternative I can think of is to do something like the below image, however unsure how to have the text fade into the background (I can't apply a background to the more background as it is transparent).

I am looking to add padding to the last line of a padding element only. I have the following html using Tailwind classes:

<div className="my-3 max-h-[4.5rem] relative">
  <p ref={ref} className="inline-block line-clamp-3 pr-14">{data.description}</p>
  <button className="text-blue-600 leading-none absolute bottom-[-4px] right-0 font-medium px-2 py-1" onClick={() => setOpen(true)}>
    more
  </button>
</div>

The padding right pr-14 is applied to the entire p tag. How can I get this to apply to only the last line? I have tried block, inline etc and none of them seem to make a difference. Is this possible in CSS?

For context, I am trying to add padding to the last line when I need to show a "more" button. The only alternative I can think of is to do something like the below image, however unsure how to have the text fade into the background (I can't apply a background to the more background as it is transparent).

• javascript
• css
• reactjs
• tailwind-css

• you should split your description in multiple <p> tags. With this you can target a specific line – hawks Commented Jun 25, 2021 at 12:06
• How would you suggest doing that? The width of the paragraph tag is dynamic. – Charklewis Commented Jun 25, 2021 at 12:15
• Its tricky to do that. You can split the words and then add n number of words to each paragraph. Maybe you can elaborate more on the problem you are trying to solve with padding. What is the need to add padding to the last line? – hawks Commented Jun 25, 2021 at 12:18
• The question has been updated, including an image. – Charklewis Commented Jun 25, 2021 at 12:20
• If your design requirements are not too strict you can change the position of the more button. More button – hawks Commented Jun 25, 2021 at 12:23

6 Answers 6

A pseudo element can do it.

 p {
  font-size:20px;
  line-height:1.2em;
  margin:0;
  text-align:justify;
}

 p:after {
  content:"";
  display:inline-block;
  height:2px;
  width:50px; /* the value of padding */
  background:red; /* to illustrate */
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu libero, efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta.  efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta.  efficitur quis condimentum ac, lacinia eu lacus. Cras faucibus vel nibh ut porta. 
  </p>

Multiline clamping only works with display: -webkit-box; thats why you weren't able to apply other display properties.

You could use a mask-image with posites to get where you want to. While not worry about background colors not matching etc:

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 70%, transparent 100%);
    -webkit-mask-position: 100% 100%, 100% 100%;
    -webkit-mask-size: 100% 100%, 120px 32px; /*120px is your padding*/
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-posite: xor;

https://codepen.io/umbriel/pen/ZEKYqvr

Dare I say its a pretty disgusting solution. But does what it says on the box.

I am assuming that you want to apply padding right for last line. May be you can try this solution

Before closing p tag you can add inline-block div width 1 Px and padding.

The answer by Temani has proven to be ideal for example to allocate a "spacer" at the end of chat-boxes to enable placing extra data and ensuring the chat-text does not conflict with the extra data:

Example:

• In message (1) there's room for the time.
• In message (2) there would be no space for the time and the word "Barcelona" and the timesmap "2:54" would overlap. With this trick it works perfect.

HTML:

<div class="my-chat-message">
    <div class="my-text">{{ message.text }}</div>
    <div class="my-display-time">{{ message.displayTimeStamp }}</div>
</div>

CSS:

.my-text:after {
    content: "";
    display: inline-block;
    height: 2px;
    width: 30px; /* the value of padding */
    background: red; /* to illustrate */
}

Currently, there is no CSS selector that would apply.

You can only select the first line using the pseudo-element :first-line. At the moment there is no equivalent for the last line, unfortunately.

Probably, some JavaScript or jQuery plugins will can handle this issue.

Try use this example, you need to plugin define to use Line-clamp

Add Line-Clamp plugin to use it

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp'),
  ]
}

tailwind example

<!-- max-h-20 = max-height:5rem; -->
<div class="my-3 max-h-20 relative mx-10 border-2 border-gray-200">
  <!-- you need to Line-Clamp plugin define in tailwind.config.css -->
  <p ref="{ref}" class="flex line-clamp-3 p-1">a b c d e f g h i j k l m n o p q r s t u v w x y z
  </p>
  <button class="text-blue-600 bg-white leading-none absolute -bottom-0.5 right-0 font-medium px-2 my-2">more</button>
</div>

Tailwind Playground https://play.tailwindcss./ILpf8grjdF