Le texte saisi dépasse les ellipses (exemple de code)

Ce que cet article vous apporte concerne l'implémentation du texte de saisie au-delà des points de suspension (exemple de code). Les amis dans le besoin peuvent s'y référer. pour vous. .

La saisie implémente la fonction de points de suspension du texte

Il est très simple pour les éléments ordinaires de se rendre compte que le texte dépasse la largeur et devient automatiquement des points de suspension. Ajoutez un. width à l'élément, puis ajoutez ces trois éléments. Utilisez simplement css :

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

Avez-vous déjà pensé à ajouter cet effet à l'élément input="text" ? Comme le montre l'image :

la saisie réalise le texte au-delà de la fonction ellipses

<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>

En fait, laissez l'entrée s'en rendre compte. Il est également très simple de changer automatiquement les ellipses lorsque le texte dépasse la limite. Ce sont toujours les trois mêmes morceaux de code. Après tests, à ce jour (23/11/2018), seuls les derniers navigateurs Chrome et Firefox le supportent, et la version mobile n'a pas été testée !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!