3

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
  • 199
  • 1
  • 2
  • 14
  • 4
    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

4 Answers4

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,462
  • 4
  • 22
  • 35
  • 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

Here is a function in javascript to shrink the text accordingly.

const correctFontSize = (str, elementWidth, originalSize) => {
  const length = str.length;
  const mult = elementWidth / (originalSize * length);
  let fontSize = originalSize * mult * 2.5;
  if (fontSize > originalSize) fontSize = originalSize;
  return Math.round(fontSize);
};

Here is a code sandbox as well: https://codesandbox.io/s/text-resize-based-on-element-width-fusnit?file=/src/index.js

To get the parent element's width, you can use the parent element's offsetWidth property. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

The wrapper function wraps correctFontSize so it can be used when the window resizes.

Yumyummyyy
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 20 '22 at 23:51
-1

Pls. use width

ie,

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

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
  • 3,005
  • 6
  • 25
  • 42