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

Question

请参阅Sam Harris 的一篇博客文章中的文本选择行为。将其与 Bear 应用程序博客上的这篇文章进行比较。在 Firefox 上，没有区别。然而，在 Safari 上，彭博文章中的文本选择无处不在，而 Sam Harris 上的博客文章仍然设法简洁。

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

Answer 1

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

\n\n

\r\n

\r\n

::selection {\r\n  background: #888;\r\n  color: #eee;\r\n}\r\n\r\ndiv {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  background: #f8f8f8;\r\n}\r\n\r\np {\r\n  max-width: 350px;\r\n}

\r\n

<div>\r\n  <p>\r\n    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\xe2\x80\x99ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the\r\n    section we want is Untagged, and you get three guesses as to which kinds of notes it collects\r\n  </p>\r\n  <p>\r\n    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\xe2\x80\x99ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the\r\n    section we want is Untagged, and you get three guesses as to which kinds of notes it collects\r\n  </p>\r\n</div>

\r\n

\r\n

\r\n

\n\n

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

\n\n

\r\n

\r\n

::selection {\r\n  background: #888;\r\n  color: #eee;\r\n}\r\n\r\ndiv {\r\n  background: #f8f8f8;\r\n  text-align: center;\r\n}\r\n\r\np {\r\n  display: inline-block;\r\n  max-width: 350px;\r\n  text-align: left;\r\n}

\r\n

<div>\r\n  <p>\r\n    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\xe2\x80\x99ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the\r\n    section we want is Untagged, and you get three guesses as to which kinds of notes it collects\r\n  </p>\r\n  <p>\r\n    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\xe2\x80\x99ll see some handy custom sections like Todo, Today, and Locked (for Bear Pro users). For today, the\r\n    section we want is Untagged, and you get three guesses as to which kinds of notes it collects\r\n  </p>\r\n</div>

\r\n

\r\n

\r\n

\n