Text Selection Covers entire width of screen

Question

Whenever I select/highlight text on my website, the bar overlaps everything on my page.

(Text selection box isn't actually grey, just needed to capture screenshot) How can I stop it from doing this so it stays in the white box?

The white box the text is in uses " word-wrap: break-word " to stop the text from overlapping the white box. I don't know if the problem is related to this or not.

<p> Test Test Test Test Test </p>

p {                         
font-family: "Calibri";
font-style: normal;
font-variant: normal;
font-size: 18px;
color: black; }

Thanks

Answer 1

Just add style oveflow: hidden; for child div. Find the below example

HTML

<div class="wrap">
    <div class="content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 
    </div>
</div>

CSS

.wrap{
    background: #ddd;
    overflow: hidden;
    padding: 20px;
}
.content{
    width: 50%;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}

JSFIDDLE DEMO