ホームページ > 記事 > ウェブフロントエンド > CSS の省略記号が機能しない場合の対処方法

CSS の省略記号が機能しない場合の対処方法

藏色散人オリジナル: 2020-11-20 11:41:313959ブラウズ

CSS 省略記号が機能しない場合の解決策: まず CSS を開き、次にプロパティ「text-overflow:ellipsis」を「overflow:hidden;」および「white-space:nowrap;width:150px;」とともに追加します。これを使って。

推奨: 「css ビデオチュートリアル」

Css 属性テキストオーバーフローの解決策: 省略記号は機能しません (テキストオーバーフローでは省略記号が表示されます)

text-overflow:elipsis を機能させる:

CSS 属性 text-overflow:elipsis を使用して機能させる場合は、スタイルは、overflow:hidden;white-space:nowrap;width:150px;

1 で使用する必要があります。テキストオーバーフロー構文:

text-overflow : clip | ellipsis

2。テキストオーバーフローパラメーターの説明:

clip: 省略記号 (...) を表示せず、単にトリミングします

省略記号: オブジェクト内のテキストがはみ出した場合に省略記号 (...) を表示します

3. 簡単な使い方:

<!doctype html><html>
    <head>
        <meta charset="utf-8">
        <title>测试页面</title>
    </head>

    <style type="text/css">        
        .test{
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
            width:150px;
            }
    </style>
    <body>
        <ul id="textFlow">
            <li class="test"><a href="#">第一标题：奇艺之旅</a></li>
            <li class="test"><a href="#" title="第二标题：萨迪斯的项圈的奇闻异事">第二标题：萨迪斯的项圈的奇闻异事</a></li>
            <li class="test"><a href="#" title="第三标题：杜斯的奇妙之旅。测试数据。测试数据">第三标题：杜斯的奇妙之旅。测试数据。测试数据 </a></li>
        </ul>
    </body></html>

以上がCSS の省略記号が機能しない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSのストローク属性とは何ですか?次の記事：CSSのストローク属性とは何ですか?

続きを見る