<div>USING TEXT-OVERFLOW:ELLIPSIS WITH INLINE FLEX</div>
<div><span>USING TEXT-OVERFLOW:ELLIPSIS WITH INLINE FLEX</span></div>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 10px;
padding: 10px;
border: 1px solid #eee;
box-shadow: 0 0 1px rgba(0,0,0,.5);
border-radius: 5px;
display: inline-flex;
&:nth-child(1) {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-child(2) {
width: 200px;
white-space: nowrap;
span {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.