Shrink text font size within a div using css [duplicate]

429
August 30, 2017, at 6:33 PM

This question already has an answer here:

  • CSS : Is it possible to adapt font size to div width? 4 answers

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.

Answer 1

.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.

Answer 2

Pls. use width

ie,

white-space: nowrap; 
width: 16em; 
overflow: hidden;
text-overflow: ellipsis; 
Answer 3

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.

Rent Charter Buses Company
READ ALSO
HTML Text with font-weight : normal is rendering first and Font-weight:bold after it [on hold]

HTML Text with font-weight : normal is rendering first and Font-weight:bold after it [on hold]

In production website ( cant disclose ) , the fonts with normal weight seem to render first and then fonts with bold weight gets rendered laterBoth are using the same font family

266
On click of document or window a open div should close

On click of document or window a open div should close

I am trying to create my custom select drop down using jquery, all goes well except the click event onselect-list, it should close but currently it's not happening, below one is my code

303
Javascript for numbered table of contents

Javascript for numbered table of contents

I am putting together a Sharepoint wiki and on each article I have a wikipedia like table of contents from the headings using what I presume is a javascript that I found on the InterWebz

253
Bootstrap checkbuttons with icons does not works

Bootstrap checkbuttons with icons does not works

I have the need to add checkbuttons to my table and I want use the Bootstrap Button for this

302