Masquer le débordement de l'élément en ligne

Question

Comment les éléments suivants peuvent-ils être atteints (uniquement en CSS)?

• Dans un bloc de largeur fixe:
• texte d'affichage, et un autre caractère/image (✤) après.
• Cependant, lorsque le texte est trop long, cacher son trop-plein,
• tout affichant toujours le caractère/image (✤) après.

visuellement:

Il ne devrait pas:

• Enroulez le texte
• pousser le bloc
• cacher le caractère/image (✤)
• affiche toujours le caractère r à droite

Markup (mais ne hésitez pas à vous suggérons d'utiliser d'autres balises si cela aide):

<div class=outer> 
    <span class=copy>Text abc def ghi jkl mno pqr stu</span> 
    <span class=symbol>✤</span> 
</div> 

Answer 1

Voici une solution en utilisant positionnement - vous pouvez remarquer que lorsque le texte est bref, le symbole restera à l'extrémité droite:

div { 
 
    border: 1px solid red; 
 
    padding 10px; 
 
    padding-right: 15px; 
 
    white-space: nowrap; 
 
    overflow:hidden; 
 
    width: 100px; 
 
    text-overflow: ellipsis; 
 
    position: relative; 
 
} 
 

 
div:after { 
 
    content: '✤'; 
 
    position: absolute; 
 
    right:0; 
 
}

<div>well, some text here</div> 
 
<div>text here</div>

Voici une solution en utilisant flexbox où je l'ai bien travailler:

div { 
 
border: 1px solid red; 
 
    padding 10px; 
 
    width: 100px; 
 
    display: flex; 
 
} 
 

 
div span { 
 
    white-space: nowrap; 
 
    overflow:hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
div:after { 
 
    content: '✤'; 
 
    padding-left: 5px; 
 
}

<div><span>well, some text here</span></div> 
 
<br/> 
 
<div><span>text here</span></div>

Answer 2

Avec l'idée que votre bloc a une largeur fixe, je venais d'afficher le caractère supplémentaire/image avec un position: absolute; selon:

supplémentaire de carbonisation en tant que pseudo-élément

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    padding-right: 25px; 
 
    border: 2px solid black; 
 
    width: 150px; 
 
} 
 

 
span { 
 
    position:relative; 
 
    display: inline-block; 
 
    padding-right: 20px; 
 
    max-width: 100%; /* or 120px or whatever you want */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
span:after { 
 
    content: '★'; 
 
    position: absolute; 
 
    top: -2px; 
 
    right: 0px; 
 
}

<div> 
 
    <span>text text text</span> 
 
</div>

Déclaré l'icône supplémentaire comme un pseudo-élément.

https://jsfiddle.net/6stc9hf0/1/

---

approche différente envisage toujours des largeurs déclarées statiques

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    padding-right: 25px; 
 
    border: 2px solid black; 
 
    width: 150px; 
 
} 
 

 
.text { 
 
    position:relative; 
 
    display: inline-block; 
 
    max-width: calc(100% - 20px); 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.icon { 
 
    position: relative; 
 
    top: -2px; 
 
    right: 0px; 
 
}

<div> 
 
    <span class="text">text text text text</span> 
 
    <span class="icon">★</span> 
 
</div>

https://jsfiddle.net/6stc9hf0/2/