ホームページ  >  記事  >  ウェブフロントエンド  >  CSS は指定されたテキストの幅を超えているため、代わりに省略記号が使用され、テキストは折り返されません。

CSS は指定されたテキストの幅を超えているため、代わりに省略記号が使用され、テキストは折り返されません。

高洛峰
高洛峰オリジナル
2017-03-13 16:41:021488ブラウズ

この記事では、テキストが指定された幅を超え、テキストを折り返さない場合に、CSS を置き換えるために楕円を使用することに関する関連情報を主に紹介します 。編集者は、これが非常に実用的であると考え、参考のために Script House プラットフォームで共有します

一般的なテキストの切り捨て (インラインおよびブロックの場合):

.text-overflow {   
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    whitewhite-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

tableテキストのオーバーフローの場合 定義:

範囲外のテーブルの場合は省略記号を表示りー

必要 注意すべき点は、この CSS スタイルはテキストの 1 行でのみ機能することです。複数行で使用する場合は、最初の行のみが機能します。

この書き方で「…」が入るのはIEだけです

他のブラウザでは指定した幅を超えると文字が非表示になります。 上記は、CSS が指定されたテキストの幅を超え、テキストが折り返されない場合の省略記号の使用についての紹介です。また、PHP 中国語 Web サイトをご利用いただき、誠にありがとうございます。 !

以上がCSS は指定されたテキストの幅を超えているため、代わりに省略記号が使用され、テキストは折り返されません。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。