Stop selection going to edge of page on multiple lines

Question

When highlighting text to copy, the blue selection goes across the entire page when selecting each line (as you can see in the image below)

enter image description here

How do you make it so it doesn't go across the page, like in the image below?

enter image description here

My code:

HTML:

<div class="maintext">

Welcome/logo

    <div class="headtab">
    About
    </div>

    <p class="info">

   SOME CONTENT

    </p>

  <div class="headtab">
  Requests
  </div>
  <p class="info">
  More content
  </p>

</div>

Then the CSS:

.maintext {
    background-color: #FFF;
    width: 950px;
    align: center;
    padding-top: 50px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-right: 70px;
    padding-left: 70px;
    padding-bottom: 100px;
    display: block;
}
p.info {
    font-family: 'Josefin Slab', serif;
    font-size: 22px;
    color: #000;
    font-weight: 200;
    line-height: 150%;
    word-wrap:break-word;
    display: block;
}
.headtab {
    margin-left: -110px;
    z-index: 20;
    background-color: #FF8100;
    height: 30px;
    width: 120px;
    line-heihgt: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 24px;
    color: #FFF;
    text-decoration: underline; 
    /* The following stopping of text selection is from: http://stackoverflow.com/questions/7018324/how-do-i-stop-highlighting-of-a-div-element-when-double-clicking-on */
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

Possible duplicate: http://stackoverflow.com/questions/8239129/html-css-how-to-prevent-highlighting-text-from-spanning-entire-width-of-page-in — DACrosby, Jul 17 '14 at 19:55
I guess you could be right. I did just try the examples on there and it works to an extent — MyNameWouldGoHere, Jul 17 '14 at 19:59

score 1 · Answer 1 · answered Jul 17 '14 at 18:47

1

You must use some sort of block tag such as <div> to put the text into. THe highlight will only be as big as the div the texts sits in.

answered Jul 17 '14 at 18:47

urnotsam

770
7
24

It's all wrapped inside but it still goes over – MyNameWouldGoHere Jul 17 '14 at 19:39
Hmm, I will continue to look into it. That should have worked. What browser are you using? – urnotsam Jul 17 '14 at 19:43
Chrome and Firefox. I will edit the question to show the code – MyNameWouldGoHere Jul 17 '14 at 19:46
Edited Not sure at all what I am doing wrong. Such a noobie question, but I've never really needed to do this before – MyNameWouldGoHere Jul 17 '14 at 19:51
as DACrosby said this is a duplicate question and the answer can be found here: http://stackoverflow.com/questions/8239129/html-css-how-to-prevent-highlighting-text-from-spanning-entire-width-of-page-in Good Luck – urnotsam Jul 17 '14 at 19:58
1

Ah yes, he's right. I added position: relative; to .maintext and it works now. – MyNameWouldGoHere Jul 17 '14 at 20:00

Stop selection going to edge of page on multiple lines

1 Answers1