How to make text responsive in a paragraph

1

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
image1082×213 10.6 KB

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

2

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

3

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!

4

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
5

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