css3 text-overflowとword-wrap_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 text-overflowとword-wrap_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:37

オリジナル

1685 人が閲覧しました

1. text-overflow

は、テキストがオーバーフローするときに省略記号 (...) を使用するかどうかを設定するために使用されます

text-overflow:clip|ellipsis

clip、オーバーフローの内容はクリップされます、elipsis: オーバーフローコンテンツは省略記号で表されます。

注: text-overflow では、テキストオーバーフローを表示する方法のみを説明しています。省略記号を生成するオーバーフローの効果を実際に実現するには、テキストを 1 行で表示するように強制する(white-space:nowrap) と overflow も定義する必要があります。非表示にするコンテンツ (オーバーフロー:非表示)。

<style type="text/css">div{    width: 100px;    background-color: #ccc;}.ellipsis{    text-overflow:ellipsis;    overflow: hidden;    white-space: nowrap;}.clip{    text-overflow:clip;    overflow: hidden;    white-space: nowrap;}</style><body>    <div class="ellipsis">文本内容文本内容文本内容文本内容</div>    <br/><div class="clip">文本内容文本内容文本内容文本内容</div></body>

ログイン後にコピー

2. word-wrap

word-wrap は、現在の行がオーバーフローしたときに改行するかどうかなど、テキストの動作を設定するためにも使用できます。

word-wrap:normal|break-word

normal: ブラウザのデフォルト値、ブレークワード設定 長い単語または URL アドレス この属性は一般的には使用されません。

1. ワードラップとワードブレークの比較

どちらも単語内の文を区切るために使用されます。

word-wrap: 行の折り返しを制御し、文字列が長すぎて自然な区切りポイントが見つからない場合に、ブラウザが単語内の文を分割できるかどうかを示します。

単語区切り: 単語内の文を区切る方法を示します。

例: word-wrap:

<style type="text/css">div{    width: 200px;    height: 100px;    background-color: #ccc;}.bw{    word-wrap:break-word;}.normal{    /*word-wrap:normal;*/}.wb{    word-break:break-all;}</style><body><h2>word-wrap:normal</h2><br/><div class="normal">a long word ddddddddddddddddddddddddddddddddd  a long word</div><h2>word-wrap:break-word</h2><br/><div class="bw">a long word ddddddddddddddddddddddddddddddddd  a long word</div><h2>word-break:break-all</h2><br/><div class="wb">a long word ddddddddddddddddddddddddddddddddd  a long word</div></body>

ログイン後にコピー

word-wrap のパフォーマンス動作は次のとおりであることがわかります:

1 行に配置できない長い単語に遭遇した場合は、最初に行を変更して配置しますそれを次の行に含めます。wrap の値がデフォルトの標準です。文字列が長すぎて自然な区切り期間が見つからない場合、オーバーフローが発生します。 word-wrap:break-word を使用すると、強制的に文を区切ることができます。

ブレークワードのパフォーマンス動作は次のとおりです。単純かつ粗雑で、単語内で直接文を分割してスペースを節約し、長い文字列を次の行に挿入しようとしません。

ブレイクワードがある場合、ワードラップは機能しません。したがって、多くの人は文を区切るときに word-wrap:break-word;word-break:break-all; と書きますが、word-break:break-all だけで十分です。