How to fit a paragraph element inside its parent container?

Question

I'm having this problem:

Here is the code:

<header class="fu-main-body-adress">
    <h3>Address</h3>
    <p><a href="#" target="_blank">hehehehehehehehehehhehehhehe</a></p>
</header>

Can anyone help me please?

Answer 1

Use word-break: break-all;.

The word-break CSS property is used to specify whether to break lines within words.

div {
  width: 50px;
  border: 1px solid black;
  word-break: break-all;
}

<div>Loremipsumdolorsit.</div>

Or word-wrap: break-word;

The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

div {
  width: 50px;
  border: 1px solid black;
}

div a {
  word-wrap: break-word;  
}

<div>
   <a href="">Loremipsumdolorsit.</a>
</div>

Answer 2

You can try text-overflow: ellipsis; Learn more on MDN.

p {
  width: 400px;
  border: 1px solid aqua;
}
a {
  display: inline-block;
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; /* "overflow" value must be different from "visible" */ 
  text-overflow: ellipsis;
}

<p><a href="#">http://stackoverflow.com/questions/34754716/how-to-fit-a-paragraph-tag-inside-its-parent-container</a></p>