text-overflow と word-wrap

text-overflow は、オブジェクト内のテキストのオーバーフローをマークするために省略記号 (...) を使用するかどうかを設定するために使用されます。

文法:

QQ截图20161014170051.png


ただし、テキストオーバーフローは、オーバーフロー時にテキストを表示する方法を説明するためにのみ使用され、オーバーフロー時に省略記号を生成する効果を実現するには、表示されるテキストを強制的に定義する必要があります。この方法でのみ、オーバーフロー テキストに省略記号を表示する効果を実現できます。

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同時に。 time、word-wrap を使用して、現在の行が指定されたコンテナーを超えるかどうかを境界で切断してキャリアを変更するかどうかを設定することもできます。

構文:

QQ截图20161014170100.png


normal はブラウザのデフォルト値です。ブレークワードは長い単語または URL アドレス内で折り返されるように設定されています。この属性は一般的に使用されません。ブラウザのデフォルト値を使用してください。


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow</title> <style type="text/css"> .test_demo{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } </style> </head> <body> <div class="test_demo"> 超酷的IT技术学习平台(我是省略号) </div> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜