how to avoid one-line text "overflow wrap" and instead make text smaller in CSS

Question

Let's say I have a div with some small text in it. The intention is that this text should fit into "only" one line. When the container width is big, the text should be justified and when the container width is small, the text should still be in one line and the font size should decrease to preserve being in one line. (Not hiding its over-flow)

I tried text-align: justify; but it doesn't work. since it does not justify the last line. (which in this case, the last line is actually the only line we have.)

Any help one this one is appreciated. Thanks in advance.

How much text will you allow in the div? At what point do you stop decreasing the font size? At some point it will be unreadable. — ShawnOrr, Dec 13 '22 at 18:41
@ShawnOrr, this should be when the text wants to wrap, when it reaches the end of the line — Normal, Dec 13 '22 at 18:44
You are going to need JavaScript for this - given in particular that the requirement for a larger container is different from that for a smaller. — A Haworth, Dec 13 '22 at 18:46
@ShawnOrr the text is small. like 3 words. and the minimum container width that I am looking for is 320px; — Ali Baghban, Dec 13 '22 at 18:51
@AHaworth is it possible with pure js? I mean without jquery? — Ali Baghban, Dec 13 '22 at 18:52
Have a look here for a ready-made solution http://fittextjs.com/ — Adam, Dec 13 '22 at 18:58
Will this do? https://stackoverflow.com/questions/15487629/non-jquery-alternative-to-fittext-js — Adam, Dec 13 '22 at 19:59
@Adam Thanks for the reference. It led me to react `use-fit-text` npm package. https://www.npmjs.com/package/use-fit-text — Ali Baghban, Dec 13 '22 at 20:10

score 0 · Answer 1 · answered Dec 13 '22 at 19:02

there!

If you really want to fit the text in one line, I would do something like this:

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* no. of lines to be shown */
  overflow: hidden;
  
  
  /* general styling */
  box-sizing: border-box;
  width: 70%;
  margin-inline: auto;
  padding: 0.25em 0.5em;
  background-color: #ccc;
}

p {
  /* remove default margin */
  margin: 0;
}

<div>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta odit corporis perferendis odio nesciunt nihil harum magni ipsam quidem saepe, iusto, praesentium impedit vel commodi exercitationem nam possimus architecto fugit.
  <p>
<div>

However, if you don't want your text to be overflown and responsive, you can use the calc() operator to calculate the font-size based on the width of the div.

Alternatively, clamp() is also a good option to go with. But, you need to play around with the numbers.

You can read more about calc() and clamp() operations in MDN Docs.

I hope it helps! :)

This solution has the problem of `height`. and for `calc` i should actually test it for a variety of screens and devices. — Ali Baghban, Dec 13 '22 at 19:11

how to avoid one-line text "overflow wrap" and instead make text smaller in CSS

1 Answers1