Discussions sur les logiciels MLXcorp

Vous n'êtes pas identifié(e).

#1 2019-06-06 16:37:56

john stro
Membre
Inscription : 2019-06-06
Messages : 2

Débordement de texte: les points de suspension ne sont pas respectés

Voir le code ci-dessous. Concerne la zone de texte en haut à droite. Si vous cliquez dessus, une liste déroulante apparaîtra. Je veux un texte trop long pour que cette zone se termine par des points de suspension, ce que le débordement de texte: les points de suspension est censé faire. Si je comprends bien, le débordement de texte: les points de suspension nécessite 3 choses:

espace blanc: maintenant
débordement caché
la largeur est en valeur absolue et non en pourcentage
Comme vous pouvez le constater dans mon code HTML, toutes ces conditions sont remplies, mais le débordement de texte: les points de suspension ne sont toujours pas respectés. Qu'est-ce que je rate?

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel= porndollz  "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
    <script src="https://use.fontawesome.com/6e0448e881.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type= xnxxhub "button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
        </ul>

        <ul class="navbar-nav ml-auto">
                <li class="searchbar">
                <form class="form-inline my-2 my-lg-0" method="get">
                    <div class="dropdown">
                    <input name="q" id="qbox" data-toggle=" xtreamporn  dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
                    <div id="search_results" class="dropdown-menu" role="menu" aria-labelledby="qbox">
                        <div>a</div>
                        <div>b</div>
                        <div>very long text very long text very long text</div>
                    </div>
                    </div>
                </form>
                </li>
        </ul>

        <style>
         .searchbar .dropdown-menu {
             left: initial;
         }
         .form-inline .form-control{
             width: 10em;
         }
         div#search_results {
             width: 12.5em;
             font-size: .8em;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis
         }
        </style>
        </div>
    </nav>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap xnxxvideo  /4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>



Aussi, je m'excuse pour le HTML mal mis en retrait. C'est quelque chose que SO fait, parce que je suis sûr que je le colle correctement (et dans ma dernière question, j'ai indenté manuellement pour qu'il soit correct, puis il est redevenu comme ça lorsque je l'ai édité)

EDIT: Pour être clair: le problème concerne la liste déroulante qui apparaît lorsque vous cliquez sur la barre de recherche en haut à droite! Certaines personnes semblaient peu claires à ce sujet.

Dernière modification par john stro (2019-06-11 12:22:45)

Hors ligne

#2 2019-06-07 09:00:14

Matthieu
Administrateur
Inscription : 2015-06-24
Messages : 89

Re : Débordement de texte: les points de suspension ne sont pas respectés

bonjour,
votre email est référencé dans certains spams de forum, je ne sais pas si vous êtes un vrai humain ou non ... :-)
votre classe div#search_results est appliquée à la div complète, alors qu'il faudrait l'appliquer aux items à l'intérieur (car cette div qui contient chaque élément n'a pas de texte proprement dit).
Il faudrait donc écrire "div#search_results div {" au lieu de "div#search_results {"

Hors ligne

#3 2019-06-10 10:11:48

john stro
Membre
Inscription : 2019-06-06
Messages : 2

Re : Débordement de texte: les points de suspension ne sont pas respectés

Matthieu a écrit :

bonjour,
votre email est référencé dans certains spams de forum, je ne sais pas si vous êtes un vrai humain ou non ... :-)
votre classe div#search_results est appliquée à la div complète, alors qu'il faudrait l'appliquer aux items à l'intérieur (car cette div qui contient chaque élément n'a pas de texte proprement dit).
Il faudrait donc écrire "div#search_results div {" au lieu de "div#search_results {"



Salut ,
Je suis actif sous bien d’autres formes, mais je ne sais pas pourquoi mon courrier électronique est considéré comme un spam. En tout cas merci pour votre replay.

Hors ligne