ホームページ >ウェブフロントエンド >htmlチュートリアル >css3 text-overflowとword-wrap_html/css_WEB-ITnose
css3 text-overflowとword-wrap_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:371687ブラウズ
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 だけで十分です。