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

Question

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

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

Answer 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>

Answer 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>

Answer 3

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

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