ATOZ CSSクイックヒント：未亡人とラインブレークの使用-CSSチュートリアル-php.cn

AtoZ CSS Quick Tip: Using Widows and Line Breaks

キーポイント

<br>タグを使用してラインラッピングを強制します。 CSSは、間隔とラインブレークを制御するために推奨されます。これにより、制御と柔軟性が向上します。
display属性を使用して、newlinesを表示または非表示にします。設定display: noneはラインブレイクを生成しませんが、display: blockはラインブレイクを生成します。メディアクエリと併せて、特定の画面サイズでラインブレークを有効または無効にすることができます。
未亡人のライン（段落またはタイトルの最後にある単語）を避けるために、最後の2つの単語の間に行を破るスペース文字（）を使用します。これにより、最後の2つの単語が1つの単語として処理されることが保証され、より美しいラインブレイク効果が生まれます。

この記事は、ATOZ CSSシリーズの一部です。このシリーズの他の記事はこちらで見つけることができます。

ATOZ CSSシリーズの次の記事を読むことを歓迎します！このシリーズでは、アルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探ります。スクリーンショットでは不十分な場合があることがわかっています。この投稿では、ニューラインの活用と未亡人のラインの回避に関する簡単なヒント/コースを追加しました。 wは未亡人のラインとラインブレイクを表します

「未亡人の列」とは、段落またはタイトルの最後に別々に存在する単語を指します。

テキスト行の最後の単語が、利用可能な幅が不十分であるために新しい行に壊れると、これらの個々の単語が表示されます。

少なくとも1つの行には、より視覚的に美しい2つの単語があり、これらの未亡人のラインはしばしば望ましくないと見なされます。私が一度働いた代理店は彼らについて非常に気難しいので、私は少し強迫的な障害を持っていたので、彼らは現れませんでした。

未亡人のラインを削除して新しいラインを処理するためのヒントを紹介します。

`<br>`タグを使用してラインラップを強制しないでください。

HTMLドキュメントにラインブレークタグを追加して、テキストが快適な方法であることを確認することで、ラインブレークを強制することができます。

<h1>
  这是一个很长的标题，应该<br>
  在这里换行
</h1>

ログイン後にコピー

これは、広い画面デバイスで見栄えが良い場合がありますが、画面が狭くなると、ラインブレークが間違った場所に表示され、テキストが壊れているように見えます。たとえば、

<code>这是一个很长的标题，
应该
在这里换行</code>

ログイン後にコピー

これは、利用可能な幅が文字列を「これは非常に長いタイトルです」しか保持できない場合に発生する可能性があります。「すべきだ」という言葉は、自然に線を包み、<br>を強制して「ここでラップライン」がラインのみを形成するようにします。

あまり良くない。

間隔`<br>`に

タグを使用しないでください

これは、多くの初心者の学生が頻繁にやっているのを見るものです。彼らはちょうどHTMLを学び、互いに物事を分離し始めたいと思っていました。

これは、

タグを使用してブランクラインを手動で追加することで実行できますが、間隔は常にCSSで処理する必要があります。属性は、スタイルではなくコンテンツにHTMLを使用してnewlinesを追加するよりも優れた制御を提供します。 <br> margin<br>タグはいつ使用できますか？

一般的に言えば、`<br>`タグの使用を避けようとします。

私は詩のタグを付けたときにのみニューラインを使用しています（ただし、ここでのタグは、すべての新しいラインとインデントを保存するために望ましい場合があります）。別の場所は、メールアドレスをマークするときです。 <br>

<p>著作権情報をすばやく追加する簡単な方法として、Webサイトのフッターパラグラフでも使用しました。 <code><code>

<p>我还曾在网站页脚的段落中使用它们，作为快速添加版权信息的简便方法。</p> </p>これは、ラインブレークを使用せずにスタイルデザインに関する私のルールに違反していますか？多分。私は自分自身を批判します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><h1> 这是一个很长的标题，应该<br> 在这里换行 </h1></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

<p>这是否违反了我关于不使用换行符进行样式设计的规则？也许吧。我会批评自己的。</p>

使用

newlinesを非表示<

`<code>display: none`a

タグはあまり役に立ちません（強制ラインブレークを除く）、視覚的な特徴がありません - それらを見ることができません、それらは形状、サイズがありませんまたは色など。 </p>

<p>一个 <soted>ただし、それらのいずれかにクラスを追加し、 display プロパティを使用してラインラッピング機能を切り替えることができます。 <br> 标签的作用并不大（除了强制换行），并且没有任何视觉特征——你无法看到它们，它们没有任何形状、大小或颜色等等。</p>

<code>設定ディスプレイ：none

display：ブロックは行の破損を引き起こします。これは、メディアクエリとともに使用すると、特定の画面サイズのラインブレークを有効または無効にすると便利です。 <code><p>但是，您可以向其中一个添加一个类，并使用 属性切换其换行能力。</p>

<code><p>设置これらのコードスニペットにより、テキストが狭い画面デバイス上の単一の行としてテキストが流れるようになりますが、大きな画面では、ラインブレークが表示され、著作権で保護されたテキストが2行に表示されます。 将不会导致换行。设置 将导致换行。这在与媒体查询结合使用时偶尔很有用，可以在特定屏幕尺寸下启用或禁用换行。</p>

<code>这是一个很长的标题，
应该
在这里换行</code>

ログイン後にコピー

未亡人の柔軟な除去を使用してください

<p>这些代码片段将允许文本在窄屏幕设备上作为单行流动，但对于大屏幕，换行将可见，版权文本将显示在两行上。</p> この投稿の冒頭に戻って、

タグを使用してラインブレークを強制する（そして醜い未亡人のラインを削除する）場合は、この投稿の冒頭に戻ります。何を使用する必要がありますか？ <p>

</h2>ラインブレークスペースのキャラクターでタイトルの最後の2つの単語に参加することは、テキストが視覚的に心地よい方法で壊れるようにするためのより柔軟な方法です。次のタグを参照してください：</p>

<p>回到我们这篇文章的开头，如果我们不应该使用 <br> <soly> 2つの単語「Newline」と「Here」の間に非ラインラップスペースを追加しました。 <code>标签来强制换行（并移除难看的寡妇行），那么我们应该使用什么呢？</p>

<code><p>好吧，用不换行空格字符连接标题中的最后两个单词是确保文本以视觉上令人愉悦的方式流动和换行的一种更灵活的方法。请看以下标记：</p>画面が広く、タイトル全体が連続して表示されるのに十分なスペースがある場合、すべてがよく見えます。

<div class="site-footer">
  <p>
    由 Guy Routledge 深情创作<br>
    © 2016 保留所有权利
  </p>
</div>

ログイン後にコピー

<code><p>我在“换行”和“在这里”这两个词之间添加了一个不换行空格，这使得它们的行为就像一个单词一样，而不是由空格分开的两个单词。</p>画面幅が縮小されている場合、最初の使用可能な行のブレークポイントは文字列「 "" "" and "wraps here"の間にあります。つまり、タイトル全体が1行に表示されるのに十分なスペースがない場合、行は2行に交換され、最後の2つの単語だけが残ります。未亡人なしではすべてが素晴らしく見えます。

<code><p>如果您想查看此技术的实际效果，您可以使用浏览器的开发者工具检查此页面上的标题。您还可以尝试调整窗口大小以查看每个标题中的单词是如何换行的。</p>このテクノロジーが実際にどのように機能するかを確認したい場合は、ブラウザの開発者ツールを使用してこのページのタイトルを確認できます。また、各タイトルの単語がどのように包まれているかを確認するために、ウィンドウをサイズ変更してみてください。

CSS未亡人の境界線と壊れた

FAQ

CSSの未亡人と盗まれた人の違いは何ですか？

CSSでは、未亡人の行と孤児の行は、段落の上または下部にぶら下がっている段落の最初または端にぶら下がっている列を指します。「未亡人の列」とは、次のページまたは列の先頭にある段落の最後にある行を指し、したがって、テキストの残りの部分から分離されています。「孤児」とは、ページまたは列の下部に単独で表示される段落の先頭にある行を指します。

CSSで未亡人や孤児を制御する方法は？

CSSは、「未亡人」と「孤児」と呼ばれるプロパティを提供し、段落のページの上部または下部に残る最小の行数を制御します。デフォルトでは、それらの値は2に設定されています。つまり、段落の少なくとも2行はページの上または下部に残ります。必要に応じてこれらの値を調整できます。

CSSの「ラインブレイク」属性とは何ですか？

CSSの「ラインブレイク」プロパティは、中国語、日本、韓国語（CJK）のテキストを包む方法を指定しています。「自動」、「緩んだ」、「通常」、「厳格」などの値を取ることができます。各値は、さまざまな状況で行を包む方法を決定し、CJKテキストのレイアウトと読みやすさを制御できます。

「ラインブレイク」属性は、非CJKテキストにどのように影響しますか？

「ラインブレイク」属性は、非CJKテキストに影響を与えません。非CJKテキストの場合、ラインブレークは「ホワイトスペース」属性と「ワードブレイク」属性によって制御されます。

Webページに「未亡人」と「孤児」のプロパティを使用できますか？

「未亡人」と「孤児」のプロパティはCSS仕様の一部ですが、もともと印刷などのページングメディア向けに設計されていました。現在、Webページのこれらのプロパティをサポートしているブラウザはごくわずかです。したがって、Webレイアウトでの使用は限られており、広く推奨されていません。

ウェブページレイアウトで未亡人の列を制御する代替品は何ですか？

Webページのレイアウトで未亡人の列を制御する手法がいくつかあります。一般的な方法は、段落の最後の2つの単語の間にラインブレークスペース（）を使用することです。これにより、最後の2つの単語が一緒に固執し、分離されないことが保証されます。別の方法は、JavaScriptまたはJQueryを使用して未亡人のラインを動的に防止することです。

CSSでのラインラッピングを防ぐ方法は？

「Nowrap」値を持つ「ホワイトスペース」プロパティを使用することにより、CSSのラインブレークを防ぐことができます。これにより、テキストが次の行に巻き付けることができなくなり、単一の行にとどまるように強制されます。

CSSのラインブレイクを強制する方法は？

はい、 "

" html要素を使用するか、「content」属性を使用して、 "after" any "and"または "before" pseudo-を使用して、CSSのラインブレイクを強制することができます。要素。 <br>