入力テキストが省略記号を超えています (コード例)

この記事は、省略記号を超えた入力テキストの実装に関するものです (コード例)。必要な方は参考にしていただければ幸いです。あなたへ。 。

Input はテキスト省略記号関数を実装します

通常の要素では、テキストが幅を超えて自動的に省略記号になることを認識するのは非常に簡単です。 width を要素に追加し、次の 3 つを追加します。 CSS を使用するだけです:

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

この効果を input="text" 要素に追加することを考えたことはありますか?図に示すように:

#input は省略記号関数を超えたテキストを実現します

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        padding: 15px;
        border: 1px solid #f60;
        margin: 50px auto;
    }
    .form-control{
        height: 30px;
        line-height: 30px;
        padding: 5px 10px;
    }
    .text-ellipsis{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    h2{
        width: 300px;
        margin: 10px auto;
    }
</style>

<h2>文字超出宽度自动变成省略号</h2>
<div>
    <input>
</div>

実際には、入力でテキストを超えたものを認識させます。 省略記号を自動的に変更するのも非常に簡単で、同じ 3 つのコードです。テストの結果、現時点 (2018-11-23) では、最新の Chrome ブラウザと Firefox ブラウザのみがサポートしており、モバイル版はテストされていません。

以上が入力テキストが省略記号を超えています (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。