0

I have a problem with styling text. I would like to get it auto adjusted when its gets to big.(Photo of the issue attached.). I have tried to do this with ,,width: fit-content" but it doesn't work. Could you please kindly give me some ideas on how can I do this? Here is my jsx fragemnt:

<div className="highlights">
          <div className="highlights-text">
            <h2>{hotel.title}</h2>
            <p className="region">{hotel.region}</p>
          </div>
          <div className="highlights-price">
            <h2 className="per-night">PLN {hotel.perNight}</h2>
            <p>per night</p>
          </div>
        </div>

and my css:

.highlights {
    align-items: flex-start;
    flex-direction: row;
    bottom: 3px;
    left: 50px;
    left: 50px;
    white-space: nowrap;
    border-radius: 8px;
    color: rgb(242, 245, 247);
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    width: fit-content;
    text-justify: inter-word;
  }
  
  .highlights-text {
    width: 100%;
    padding: 0px 10px;
    margin: 10px 0;
    color: rgb(242, 245, 247);
    width: fit-content;
  }
  
  .highlights-price {
    padding: 0px 10px;
    margin: 10px 0;
  }

And In the attachment, you can see where the problem is.enter image description here

Emilia
  • 85
  • 6
  • Please update your question to provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the issue, preferably as a StackSnippet (the `<>` icon from the toolbar). Or maybe a codesandbox, since looks like you are using React?. For example, I think it will be important for you to include the parent element of your `highlights` div. It may also be a good idea for you to indicate what your desired outcome looks like - do you want the extra text to wrap so that it fits on top of your image? Ellipsis? Truncated? Smaller font? – Jake Mar 12 '23 at 22:22
  • There is no css that would achive what you want. But there's this javascript that you might want to use: http://fittextjs.com/ – Johannes Mar 12 '23 at 22:28

0 Answers0