Home / Questions / 275753
Accepted
Julio Cesar
Asked: 2020-07-01 12:01:31 +0800 CST 2020-07-01 12:01:31 +0800 CST

Problems with excess in HTML

  • 772

I have a problem with HTML, for example, I have a container, inside the container I have several elements and among them there is an element <p>, the problem is that there comes a point in which the text inside <p>is too much and causes the text or the <p>comes out of the container.

This is because I established a widthdel 20%, and it needs to have that width, my question is, how do I make it so that instead of continuing the text in length, when it is at the limit of the container, it does a line break?

This would be my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="column">
            <h2>Tituloooooooooooo</h2>
            <p class="price">500$</p>
            <p>aaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
        </div>
        <div class="column">
            <h2>Tituloooooooooooo</h2>
            <p class="price">500$</p>
            <p class="">aaaaaaaaaaaaaaaaa</p>
        </div>
    </div>
</body>
</html>

And this my CSS file:

.container {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    border: 1px solid black;
    padding: 10px;
}

.column {
    border: 1px solid black;
    padding: 10px;
    margin: 5px 12px 25px 12px;
    width: 20%;
}

This would be the image of how the result is displayed:

enter image description hereThanks in advance for your answers!

html

1 Answers

  1. Best Answer

    For the word to be "cut" and generate a line break you could use:

    Option 1:

    overflow-wrap

    The CSS property of overflow-wrapis applied to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing into its inline box.

    Setting overlfow-wordequal to break-wordwe get:

    Normally unbreakable words can break at arbitrary points if there are no acceptable breakpoints on the line, but the smooth-wrapping opportunities introduced by the break word are not considered when calculating intrinsic minimum content sizes.

    show

    .container {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
  border: 1px solid black;
  padding: 10px;
  overflow-wrap: break-word
}

.column {
  border: 1px solid black;
  padding: 10px;
  margin: 5px 12px 25px 12px;
  width: 20%;
}
    <div class="container">
  <div class="column">
    <h2>Tituloooooooooooo</h2>
    <p class="price">500$</p>
    <p>aaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
  </div>
  <div class="column">
    <h2>Tituloooooooooooo</h2>
    <p class="price">500$</p>
    <p class="">aaaaaaaaaaaaaaaaa</p>
  </div>
</div>

    Option 2:

    word break

    The CSS property word-breaksets whether line breaks appear where the text would overflow its content box.

    Setting word-breakequal to break-allwe get:

    To avoid overflow, word breaks should be inserted between two characters (excluding Chinese/Japanese/Korean text).

    show

    .container {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
  border: 1px solid black;
  padding: 10px;
  word-break: break-all
}

.column {
  border: 1px solid black;
  padding: 10px;
  margin: 5px 12px 25px 12px;
  width: 20%;
}
    <div class="container">
  <div class="column">
    <h2>Tituloooooooooooo</h2>
    <p class="price">500$</p>
    <p>aaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
  </div>
  <div class="column">
    <h2>Tituloooooooooooo</h2>
    <p class="price">500$</p>
    <p class="">aaaaaaaaaaaaaaaaa</p>
  </div>
</div>

    • 5