如何使用 Safari 实现干净的文本选择？

Posted 2023-03-06

【中文标题】如何使用 Safari 实现干净的文本选择？

【英文标题】：How to achieve clean text selection with Safari?

【发布时间】：2020-09-17 10:35:48

【问题描述】：

查看Sam Harris' blog posts 之一上的文本选择行为。将其与post on the Bear app blog 进行比较。在 Firefox 上，没有区别。然而，在 Safari 上，Bloomberg 文章的文本选择到处都是，而 Sam Harris 上的博客文章仍然简洁。

如何控制文本选择行为以始终只覆盖实际文本而不溢出？

【问题讨论】：

你检查我的答案了吗？成功了吗？

我评论了你的回答@ꜱᴏʜᴇʟʟ

这有帮助吗？ ***.com/questions/13911823/…

【参考方案1】：

这是由于元素被包裹的方式。您可以通过使用“flex”显示容器或隐藏溢出来重现此效果。但是复制的简单且影响较小的方法是强制以不同的方式渲染容器。试试这个：

.entry-content
    transform: translateY(0);

这里的例子：

.wrapper
  width:300px;
  margin:0 auto;
  transform: translateY(0);

<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

【参考方案2】：

通过在父元素上设置display: flex 来制作父元素flex 容器。

::selection 
  background: #888;
  color: #eee;


div 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #f8f8f8;


p 
  max-width: 350px;

<div>
  <p>
    Next to the top-level Notes section in the Sidebar is what professionals in the industry refer to as a disclosure triangle. Give it a tap-a-roo and you’ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the
    section we want is Untagged, and you get three guesses as to which kinds of notes it collects
  </p>
  <p>
    Next to the top-level Notes section in the Sidebar is what professionals in the industry refer to as a disclosure triangle. Give it a tap-a-roo and you’ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the
    section we want is Untagged, and you get three guesses as to which kinds of notes it collects
  </p>
</div>

或者，您可以将p 元素设为inline-block 元素。

::selection 
  background: #888;
  color: #eee;


div 
  background: #f8f8f8;
  text-align: center;


p 
  display: inline-block;
  max-width: 350px;
  text-align: left;

<div>
  <p>
    Next to the top-level Notes section in the Sidebar is what professionals in the industry refer to as a disclosure triangle. Give it a tap-a-roo and you’ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the
    section we want is Untagged, and you get three guesses as to which kinds of notes it collects
  </p>
  <p>
    Next to the top-level Notes section in the Sidebar is what professionals in the industry refer to as a disclosure triangle. Give it a tap-a-roo and you’ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the
    section we want is Untagged, and you get three guesses as to which kinds of notes it collects
  </p>
</div>

【参考方案3】：

请仅将以下样式添加到您的 .entry-content 中： 最大宽度：47rem； 边距：0 自动； 添加它们后再次检查页面并让我知道是否发生了变化？ :)

【讨论】：

我没有任何.entry-content 课程。在将您的样式添加到所有内容时，我看到了一些变化 (*)，但这会破坏事情。

【参考方案4】：

尝试在您自己的 CSS 之前添加一些重置样式。来自https://meyerweb.com/eric/tools/css/reset/ 的类似内容：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video 
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section 
    display: block;

body 
    line-height: 1;

ol, ul 
    list-style: none;

blockquote, q 
    quotes: none;

blockquote:before, blockquote:after,
q:before, q:after 
    content: '';
    content: none;

table 
    border-collapse: collapse;
    border-spacing: 0;

【讨论】：

这个不走运。会尝试更多的重置样式。