web-dev-qa-db-fra.com

Comment obtenir une sélection de texte propre avec Safari?

Voir le comportement de la sélection de texte sur l'un des articles de blog de Sam Harris . Comparez cela à ceci post sur le blog de l'application Bear . Sur Firefox, il n'y a pas de différence. Cependant, sur Safari, la sélection de texte sur l'article de Bloomberg est omniprésente, tandis que l'article de blog sur Sam Harris parvient toujours à être concis.

Comment contrôler le comportement de sélection de texte pour ne couvrir que le texte réel et ne pas déborder?

Demonstration

htmlcsscross-browsertextselection
7
Valentin Walter

Créez l'élément parent flex conteneur en définissant display: flex sur l'élément parent.

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

Vous pouvez également créer les éléments pinline-block éléments.

::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>
1
Yousaf

Cela est dû à la façon dont l'élément est enveloppé. Vous pouvez reproduire cet effet en affichant votre conteneur avec "flex", ou en masquant le débordement. Mais le plus simple et le moyen le moins impactant de reproduire est de forcer le rendu de votre conteneur différemment. Essaye ça:

.entry-content{
    transform: translateY(0);
}

Exemple ici:

.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>
1
Camille

Essayez d'ajouter des styles de réinitialisation avant votre propre CSS. Quelque chose comme ça de 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;
}
0
Jack Putter