How to make text responsive in a paragraph

Hi!

I am working in the portfolio project, and my problem is related to the ‘About me’ area. The text I wrote did no fit the

area, it went through it like the image below:
image

This area have the following code:

<!-- inicio corpo da pagina-->
  <div class="container-fluid" id="content">
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" id="middle">
          <!-- Texto sobre mim e imagem-->
         <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">
          <img src=" image url " class="img-rounded" id="img_me"></img>
            </div>
            <div class="col-md-8" id="textAboutMe">
              <h3 style="font-family: 'Istok Web', sans-serif; font-size:37px; font-weight:bold; color:#383837;">Who I Am?</h3>
              ahuhauahuhuahduhadhaçuhdalkhiudbfiusdfhiusdhfuosfhshfkudshfskluhfakhfçauhfçadhfakudsfhauhfuashlafsfadsfasdfasfasfafafasfadsfasdfasdsbtbsdfb
              
            </div>
          </div>
        </div>
        <a id="about"></a>
        <div class="col-md-2"></div>
      </div>
  </div>
 </div>

Here is the CSS for the text area:

#textAboutMe{
padding:15px;
font-family: ‘Lora’, serif;
font-size:25px;
}
What can I do to make that text fill just the div size?

Thank you!

LeoGallerDev

You probably want to use placeholder text that includes spaces. The most popular is lorem ipsum.

Hi Kevcomedia!

Thanks for your thoughts, but the problem is not about the text itself, I´m having trouble to make the text just use the space of the div.

Like, I want the text to break a line when it reaches the border on the right.

Best regards!

Hey guys!

Just found the solution.
It is very simple, just add to your css, at the styles definition of your div the following code:
word-wrap: break-word;
It will make the text occupy the space of the DIV.

Hope it helps.

1 Like

Good to know you’ve solved it :+1:. Sorry I couldn’t give a better answer because all I had was your description of the problem, a screenshot and a code snippet. If you’re working on codepen, it’s much more helpful to share a link to it as well, so others can thoroughly inspect the problem (especially true for the more advanced projects :wink:)

1 Like