1

I have a fixed width div of say 120px. The text inside it can change in length with different number of characters. For example, for English language it could be "Compare" and for Russian it could be "Добавить в сравнение".

Now the width of the div is ok for the English wording, but for Russion wording, an overflow occurs. Is there a way in css to shrink the font size in case an overflow occurs.

I know the usage of following css, but I do not want to have ellipsis and want to show the full text even if it gets smaller in size.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

EDIT: The question is marked as duplicate of another question but it is not. The other question says that the div is responsive, not fixed width and also the text inside it can grow, while my question asks about how to shrink the text if it is larger.

Imran Ahmed
  • 179
  • 1
  • 2
  • 14
  • 3
    No, that is not possible using CSS alone. You can use some JavaScript to “measure” in what size the text would still fit in (pretty sure there’s existing solutions for that, so do some research.) – CBroe Aug 30 '17 at 10:09
  • try using vw property of css – Sanchit Patiyal Aug 30 '17 at 10:10
  • @SanchitPatiyal vw property wont work because I have fixed width div. The width is not the issue, the text content length is the issue :) – Imran Ahmed Aug 30 '17 at 10:11
  • @CBroe sad to know that :( this is something pretty common that should have a solution using css, it is very inefficient to have javascript applied to dozens of such divs or buttons just to fix their text overflow ): – Imran Ahmed Aug 30 '17 at 10:13
  • I think the correct answer is what @CBroe said, there is no solution to this in css yet, and I have to use javascript / jquery. I would be happy to accept the answer if you post it – Imran Ahmed Aug 30 '17 at 11:10

3 Answers3

0

Pls. use width

ie,

white-space: nowrap; 
width: 16em; 
overflow: hidden;
text-overflow: ellipsis;
user8256287
  • 181
  • 15
0

.content_div{
  font-size: calc(1.1vw + 1.1vh + 1.1vmin);
  border:thin black solid;
  outline:none;
  padding:5px 2px;
  width:120px;
  overflow:hidden;
  font-size-adjust: 0.25;
}
<button class="content_div">
    Some Description Some Description
</button>

Is this the same that you are looking for?

Hope this helps.

Bhavin Shah
  • 2,422
  • 4
  • 21
  • 32
  • No my friend, I actually know this solution but the biggest drawback is that it cuts the text off. What i am looking for is that the font-size reduces to fit the text. – Imran Ahmed Aug 30 '17 at 10:18
  • if content is more then will it be ok that it comes in new line? – Bhavin Shah Aug 30 '17 at 10:22
  • the content will not be too long, it could be 2 to 4 words, and it wont go to new line, a button with 2 lines does not look good, instead a button with smaller font in case of larger content looks better – Imran Ahmed Aug 30 '17 at 10:25
0

how about using overflow: scroll with white-sapce: nowrap

<div class="content">Some text you want to display.</div>

.content {
    width: 100px;
    overflow: scroll;
    white-space:nowrap;
}

If you want users to see entire text then this is the best you can do without using javascript. This will look ugly but it can be managed using some more css.

Ragas
  • 2,447
  • 5
  • 21
  • 40