Solution 1 :

Without seeing the additional code you’ve applied already, a simple CSS solution could be:

p{
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all; 
}

When you click on the p it should highlight the inner text. If you don’t wish this to be applied to all P tags then you can add a class to the P tags, specifying which should highlight.

Note: Not sure if MS supports yet.

Problem :

I am working on a website but when I select (highlight) the text paragraphs, the selection expands to the whole section width. How do I avoid this?

This is the HTML code:

.intro-project {
  font: 140%/1.5;
  width: 100vw;
  height: auto;
  margin: 0 auto;
  padding-top: 5%;
  color: rgba(29, 29, 27, 1)
}

.intro-project p {
  width: 55%;
  margin: 0 auto
}
<section>
  <div class="intro-project">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
      ea commodo consequat.
    </p>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</section>

And this is how it looks like:

enter image description here

Comments

Comment posted by Gene Sy

can you give the css relevant to the html code?

Comment posted by Erikamyself

shouldn’t it select only my

, the one with the width: 55% rather than the whole div ?

Comment posted by it’s working as expected

I’ll take the risk and say that this is not the default selection style of the browser. When I test this code,

Comment posted by chriskirknielsen

This is browser-specific. Doesn’t happen on Firefox or Chrome on macOS, but it happens on Safari.

Comment posted by Erikamyself

@chriskirknielsen I am actually using Safari…haven’t tried on other browsers yet…but it shouldn’t happen there either…

By