Как добиться чистого выделения текста в Safari?

Question

См. Поведение выделения текста в одном из сообщений блога Сэма Харриса . Сравните это с этим сообщением в блоге приложения Bear . На Firefox разницы нет. Однако в Safari выбор текста в статье Bloomberg повсюду, в то время как сообщение в блоге о Сэме Харрисе по-прежнему удается быть кратким. не переполняется?

Answer 1

Сделайте родительский элемент flex контейнером, установив display: 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 2

Это связано с тем, как элемент обернут. Вы можете воспроизвести этот эффект, отобразив свой контейнер с помощью «гибкости» или скрыв переполнение. Но самый простой и менее эффективный способ воспроизведения - это заставить отрисовку вашего контейнера иначе. Попробуйте это:

.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 3

Пожалуйста, добавляйте ТОЛЬКО к вашему .entry-content следующие стили: max-width: 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;
}