javascript - Apply padding to the truncated line of a multiline text - Stack Overflow

admin管理员组

文章数量:1400182

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

Share Improve this question Follow edited Sep 17, 2023 at 15:35 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Jun 25, 2021 at 12:00 CharklewisCharklewis 5,70166 gold badges4040 silver badges8282 bronze badges 7

• 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

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 3

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

本文标签： javascriptApply padding to the truncated line of a multiline textStack Overflow