javascript - 幅をオーバーフローさせずに複数行のテキストを選択する

Question

上の画像は、クロス ラインを選択したときに、黄色の領域から不要な赤色の選択範囲を示しています。以下のように黄色の部分を選択したいです。

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;
}

これを達成する方法を知っていますか？

ここでコードを実行します: http://jsfiddle.net/3AESf/

Answer 1

あなたはそれを解決するために使用display: inline-block;することができます#parent

Answer 2

display:inline-blockオプションではない場合の代替ソリューションは、追加することです

overflow: hidden;

に#parent。それもうまくいきます。