Question

我正在尝试使用内联CSS只读取一些文本。使用标准html页面进行测试时，这两种方法都可以正常工作。

Firefox语法：

<div style="-moz-user-select: none;">Some text</div>

Chrome语法：

<div style="-webkit-user-select: none;">Some text</div>

但是，我尝试在CMS产品中使用的文本编辑器中使用此语法。它适用于Firefox，但不适用于Chrome。我也尝试过使用最基本的方法，但也不起作用：

<div style="user-select: none;">Some text</div>

我的问题是，有没有其他方法可以使用内联CSS（或HTML）来禁用文本块。因为我们使用的是自由文本编辑器，所以我们无法使用任何HTML输入类型。

Answer 1

可以将所有三个内联css组合如下：

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div>

这种方式适用于您提到的所有浏览器。可以将此css包装到链接帖子中建议的一个类中作为How to disable text selection highlighting using CSS?引用的解释：

-webkit-touch-callout：none; / * iOS Safari /
      -webkit-user-select：none; / Chrome / Safari / Opera /
      -khtml-user-select：none; / Konqueror /
      -moz-user-select：none; / Firefox /
      -ms-user-select：none; / Internet Explorer / Edge /
      user-select：none; / 目前没有前缀的版本                                         任何浏览器都不支持* /

还可以使用一些javascript属性来阻止选择：

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>

使文本只读/不可选

1 个答案: