テキストオーバーフローで自動的に省略記号が表示される CSS メソッド

今回は文字が溢れた時に省略記号CSSを自動表示する方法をお届けします文字が溢れた時に注意すべき点は何なのか一緒に見ていきましょう。

元のレイアウトを壊さないようにするには、余分なテキストを省略記号で置き換えて次の効果を得る必要があります:

• 単語が多すぎます...

• これあまり多くありません。

html: これはリストです。 ul/olどちらでも大丈夫です。

<ul>
    <li>这是个短句子</li>
    <li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li></ul>

まず、省略記号の CSS コードは次のとおりです:

text-overflow: ellipsis; このコード行は、次の 2 つの条件を満たしている必要があるため、機能しないことがよくあります。1. 幅が設定されている必要があります。 white を -space: nowrap (行の折り返しなし) と overflow: hidden (超過部分を非表示) に同時に設定します。したがって、完全な CSS コード:

li {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

ただし、li に overflow: hidden を設定すると、どんな小さなアイコンであっても、リスト全体の

list-style-type が再び機能しなくなります。セットしても無駄です。効果は次のようになります:

解決策: 設定を追加しますlist-style-position: inside;

しかし! ！ ！このとき、アイコンは表示され、オーバーフローテキストは非表示になりますが、省略記号はどこにも見つかりません。 。 。 。

結局のところ、なぜそのような効果があるのか​​はわかりません。しかし、不屈の精神で再スタートしました。 。 。 。

気が変わって、全身に影響するリストのスタイルを変更しました。 を使用してテキストを省略記号で囲むと解決します。

<ul>
    <li><span>这是个短文字</span></li>
    <li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li></ul>

CSSコード:

span{
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{
    list-style-type:circle;
    /*list-style-position: inside;注意，不需要添加这行代码*/
}

ははは。 。 。 。ついにそれが起こりました！ ！ ！ ！リスト記号と省略記号の両方があります。

結論: オーバーフローテキストを設定するときは、リスト形式の問題が発生するため、liタグに直接設定しないでください。または、spanで囲んでspanの省略記号を設定します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドにおけるHTMLの基礎知識

CSSフロートボックスモデルの位置

以上がテキストオーバーフローで自動的に省略記号が表示される CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。