I have a div with a somewhat long text, but since it is very long it tends to jump to the next line, and what I need is for it to stay on the same line and if the text is very long, it only reaches the top of the div and the rest is hidden:
I have the following, as you can see the text is exceeded from my div:
Make some adjustments and manage to adapt it:
Now my next problem is that when I make it responsive to less than 500px width it stays as the same width and does not adapt
Any ideas, to make it responsive, this is my css for the div:
.selected {
border-radius: 8px;
margin-bottom: 8px;
position: relative;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.s-box{
border-radius: 100px;
width: 200px;
box-sizing: border-box;
line-height: 24px;
color: var(--black);
display: inline-block;
height: 2.2rem;
}
<!-- Mi HTML -->
<div class="w-100 s-box">
<div class="selected">
Servicios inmobiliarios .....
</div>
</div>
It turned out based on this answer where something similar happened:
https://stackoverflow.com/questions/64642505/white-space-nowrap-css-style-not-allowing-for-table-to-be-responsive
When defining my white-space: nowrap, the width stays in line and fixed, which affected my responsiveness on screens smaller than 500px, add a min-width of 100% and a width of 50px and it worked excellent