Select multi-line text without overflow the width

Question

The up image shows the unwanted red selection out of the yellow area when you select cross lines. I want to select within the yellow part, like the following:

HTML:

<div id="parent">
    <div id="child">
        This is some content... This is a long lonnnnnnng content.
    </div>
</div>

CSS:

#parent {
    width: 200px;
    background-color: #666;
}

#child {
    padding: 50px;
    background-color: #ff0;
}

::selection {
    background-color: #f00;
}

Do you know how to achieve this?

Run code here: http://jsfiddle.net/3AESf/

Answer 1

You can use display: inline-block; on #parent to solve it