Apply padding to last line of a paragraph

user_10141904 0
Viewed 931

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).

enter image description here

tailwind-css reactjs css javascript
5 Answers

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>

user_86203330

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.

user_21122520

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 composites 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-composite: xor;

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

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

user_7161610

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.

user_73784060

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.com/ILpf8grjdF

user_46340600
Related