0

My code is like this:

.container .aciklama2{
    text-align: center;
    font-family: 'Roboto', sans-serif ;
    font-size: 10;
    color: blanchedalmond;
    background-color: black;
    width:25%;
    height:280px;
    white-space: pre-line;
    float:left;
}

The appearence is like this:

enter image description here I am unable to make the text responsive and fit the div how can I do that?

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
PhysicsEnginering
  • 11
  • 1
  • 6
  • Is it in mobile display? – dmarinus Oct 29 '21 at 07:44
  • 1
    Do you want the text to fit the div - that is, as the div's dimensions are fixed, you want the text to change size so it always fits in. Or do you want the text size to stay the same and the div to change its dimensions so that all the text is within it? It sounds like you want the first but all the answers so far are assuming the second. – A Haworth Oct 29 '21 at 07:53

2 Answers2

1

You should remove the fixed height property on your Css. Use the min-height to replace in necessary.

.content{
  text-align: center;
  font-family: 'Roboto', sans-serif ;
  font-size: 10;
  color: blanchedalmond;
  background-color: black;
  width:25%;
  min-height:280px;
  white-space: pre-line;
  float:left;
}
<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ipsa, aliquid vero facilis beatae expedita, eaque cumque iste neque, tenetur quos molestias minus officiis maxime reprehenderit illo nam architecto. Corrupti.
Officia laudantium cumque error consequatur! Animi nam obcaecati doloribus? Inventore, laudantium. Ipsam repudiandae facilis minima molestiae officia ab porro dolorem earum mollitia eius. Nam nulla laudantium unde et nemo quod.
Est accusamus delectus quibusdam quasi, similique voluptatem. Sit ducimus cupiditate praesentium magnam nostrum veniam consequatur non, a perferendis recusandae aperiam accusamus vero maxime doloremque. Eveniet rerum sint saepe est! Architecto?
Itaque deserunt, minima consequatur dolores voluptas accusamus distinctio aliquid quas obcaecati. Repellendus labore fugiat dolor corrupti aperiam, nemo sunt quod! Debitis quod esse voluptatem voluptates quo sint nam cum explicabo.
Consequatur cumque incidunt cupiditate veritatis vitae dicta mollitia molestiae! Iure, eos vel sapiente beatae cumque nobis soluta magnam quae! Odit, nemo adipisci eaque expedita eligendi cum ullam ipsum provident beatae.</div>
huykon225
  • 563
  • 5
  • 17
-1

You have set a default height for the div. Change height: 280px; to min-height: 280px;

If you do that, the div wil always be atleast 280px height. But if there is to much text, the div height will increase so the text is able to fit in it.

I hope I helped you out with this. :)

dmarinus
  • 161
  • 3
  • 16
  • you miss the question. The question is to resize the text responsivly to fit a certain element. Not to resize the element to fit the text. – tacoshy Oct 29 '21 at 08:51