Q&A
text-ellipsis
- showcase
- html
- css
amy🌲
aliveAmy🌲
aliveAmy's name is xiechangqing🌲
<div className={styles["container"]}>
<span className={styles["text"]}>amy</span>
<i className={styles["icon"]}>🌲</i>
</div>
<div className={styles["container"]}>
<span className={styles["text"]}>aliveAmy</span>
<i className={styles["icon"]}>🌲</i>
</div>
<div className={styles["container"]}>
<span className={styles["text"]}>aliveAmy's name is xiechangqing</span>
<i className={styles["icon"]}>🌲</i>
</div>
.container {
width: 200px;
background-color: pink;
margin: 1rem 0;
display: flex;
align-items: center;
}
.text {
display: inline-block;
max-width: 80%;
background-color: skyblue;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
width: 20%;
}