Html Question posted in
Some basic documentation can be found here.

Html – How to select line of text without space between lines if the line-height value is big?

How can I select line of text with big line-height property value? Selecting only the text and not the spaces between the lines. For instance,

p {
  line-height: 6;
  font-size: 18px;
}
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, ratione saepe? Rerum, autem! Nulla consequatur, optio praesentium aliquid modi, beatae fugiat asperiores suscipit enim excepturi hic, magnam fugit? Voluptates, fuga?
</p>

The code snippet above will have selection indication (blue/gray background) on the whole line:

Rather I want it to select only the text without the space between the lines. This would be the result I want to achieve:

Just as in the following snippet, I want to achieve the effect of selecting two paragraph (as follows) but in one p tag.

p {
  line-height: 1.45;
  font-size: 18px;
}
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
  Rerum, autem! Nulla consequatur, optio praesentium...
</p>
Tags:

2

Answers


  1. 0

    If you want to do this with CSS only the the answer is NO.

    You can achieve this by having different html elements.

    Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background, background-color and text-shadow.

    Note that, in particular, background-image is ignored, like any other property. https://developer.mozilla.org/en-US/docs/CSS/::selection

    Login or Signup to reply.
  2. 0

    Adding an extra span where you reset the line-height and use a mask seems to work. I am not sure how reliable is this solution.

    p {
  line-height: 6;
  font-size: 18px;
}

p span {
   line-height: initial;
   mask: conic-gradient(#000 0 0);
}
    <p>
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, ratione saepe? Rerum, autem! Nulla consequatur, optio praesentium aliquid modi, beatae fugiat asperiores suscipit enim excepturi hic, magnam fugit? Voluptates, fuga?</span>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search