在 Chrome 中跨窗口显示文本选择答案

【问题标题】：Selection of text appears across window in Chrome在 Chrome 中跨窗口显示文本选择
【发布时间】：2012-09-23 09:40:04
【问题描述】：

所以我正在使用一个函数来选择<div> 中的文本。它可以工作，但我不喜欢它在 Google Chrome 中的显示方式。你可以看到我的作品here。单击按钮，<div> 中的文本被选中，但在 Chrome 中，选择一直延伸到窗口右侧，这不好。不过，它就像我在 Firefox 和 IE 中想要的那样工作。

<div> 的宽度当然是 200 像素。我也尝试过添加max-width 声明，但这也没有任何好处。有什么方法可以防止选择以这种方式显示？

【问题讨论】：

标签： javascript css google-chrome selection

【解决方案1】：

尝试将 CSS 规则 display:inline-block 添加到您的 div：

#result {
    width: 200px;
    font-family: Arial;
    font-size: 10pt;
    text-align: center;
    padding: 8px;
    border: 2px solid black;
    display:inline-block;
}

jsFiddle example

【讨论】：

【解决方案2】：

您可以使用selectNodeContents() 代替selectNode()：http://jsfiddle.net/6XUJR/

【讨论】：

这行得通，但是与@j08691 的答案相比，这有什么优势？
您的 div 仍然是块级元素，如果这是您正在考虑的问题。
不是真的 - 这对我来说并不重要。