web-dev-qa-db-ja.com

Safariできれいなテキストを選択する方法は？

Sam Harrisのブログ投稿 のいずれかでテキスト選択の動作を確認してください。これと比較してみてください Bearアプリのブログに投稿 。 Firefoxでは、違いはありません。ただし、Safariでは、ブルームバーグの記事でのテキストの選択は至る所にありますが、Sam Harrisのブログ投稿は依然として簡潔になっています。

テキスト選択動作を制御して、常に実際のテキストのみをカバーし、オーバーフローしないようにするにはどうすればよいですか？

Demonstration

htmlcsscross-browsertextselection
7
Valentin Walter

親要素に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>
1
Yousaf

これは、要素がラップされる方法が原因です。この効果を再現するには、コンテナを「フレックス」で表示するか、オーバーフローを非表示にします。しかし、簡単で再現性の低い方法は、コンテナのレンダリングを異なる方法で強制することです。これを試して：

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

独自の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;
}
0
Jack Putter