html - 我可以格式化 HTML 或 CSS 是一种使用户可以轻松地在移动设备上复制文本 block 的方法

Question

我正在寻找一种方法来格式化我的页面的一部分，以便用户可以在移动设备上轻松复制一小段文本。

Bootstrap 中是否有任何类、一些 HTML 或格式化我的 CSS 以简化此操作的方法。我知道除 IE 之外的浏览器不喜欢 javascript 将文本复制到剪贴板。

Answer 1

由于您的问题是针对移动设备的 HTML 和 CSS，因此这里有一些想法。

1. 我发现在您希望用户交互的元素上提供较大的点击区域有助于开始。例如。 <p> 上的填充例如。因此，当用户开始按住以启动文本选择时，它更有可能落在段落的点击区域。 (一个巧妙的技巧是用填充替换边距!)

2. 尽量确保可选择的内容遵循自然的内容流框模型。没有奇怪的 float 或绝对定位的内容或其他可能混淆选择小部件的内容。让它尽可能像文档一样!

3. 阅读控制选择的方法，例如user-select CSS 属性 - https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

4. 您可能希望在没有意义的元素上禁用文本选择，以帮助使重要部分的文本选择更清晰。

5. 大字体很明显，但也许不那么明显，非常大的行高非常适合让文本选择不那么尴尬!它也可以大大提高侧面的可读性，我最喜欢的正文是 line-height: 1.6; .

6. 如果您使用视口(viewport)元标记，请确保他们可以放大以在需要时舒适地边对边填充文本/段落。这对近距离接触、选择文本和触摸您的内容有很大帮助。

---

但是，如果你确实想尝试 JS，那么我会推荐 clipboard.js:https://clipboardjs.com/

还请提前考虑您的用户想要复制的内容，您可以进行一些分析并允许用户突出显示常用文本。这是在 Medium 上完成的，作为一个很好的例子。