HTML:
<ul>
<li><a href="">someloooooooooooooooooooooong text </a></li>
<li><a href="">someloooooooooooooooooooooong text </a></li>
</ul>
Comment puis-je ajouter des bordures comme celle-ci?
Mon CSS:
ul {
display: block;
width: 255px;
border: 1px solid #007ab6;
}
ul a {
width: 225px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
ul a:hover {
overflow: visible;
width: unset;
display: inline-block;
border: 1px solid;
background: #ebf7fd;
}
C'est à quoi ça ressemble, mais ce n'est pas exactement ce que je veux.
Eh bien, techniquement, c'est possible avec des blocs qui se chevauchent avec une marge négative, mais un peu délicat. Vous pouvez voir un exemple dans l'extrait ci-dessous.
ul {
display: block;
width: 255px;
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
}
ul li {
font-size: 16px;
box-sizing: border-box;
line-height: 2;
padding: 0 10px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
border: 1px solid #007ab6;
border-bottom-color: transparent;
border-top-color: transparent;
background: #ebf7fd;
position: relative;
z-index: 1;
margin: -1px 0;
}
ul li:first-child {border-top-color: #007ab6;}
ul li:last-child {border-bottom-color: #007ab6;}
ul li:hover {
overflow: visible;
width: auto;
min-width: 100%;
border-color: #007ab6;
margin: 0;
z-index: 0;
line-height: calc(2em - 2px);
}
ul li:first-child:hover,
ul li:last-child:hover {
margin: -1px 0;
line-height: 2;
}
<ul>
<li><a href="">someloooooooooooooooooooooong text </a></li>
<li><a href="">text </a></li>
<li><a href="">someloooooooooooooooooooooong text </a></li>
<li><a href="">someloooooooooooooooooooooong text </a></li>
</ul>
UPD: Maintenant, cela fonctionne avec hover
effet.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots