Aligning multiple <p> tags as text-CodePudding

How can i aligning texts in multiple html p tags:

<div>
<p>aaaaaa</p>
<p>bbbbbbbbbbb</p>
<p>cccccccccccc</p>
</div>

Making them have word-wrap property like normal text and break line like below?

aaaaaa bbbbbbb
bbbb ccccccccc
ccc

Text in p tags needs to be dynamic and trigger seperate events onClick. Is there any css tricks like "display: flex" that can achieve this?

edit:

Sorry for being unclear, I would try to explain again.

I would like to put the 3 p tags into a container that have uninsuffiecnt width to display all in one line. And the desired beviour would be something like this:

CodePudding user response：

I would recommend flexbox:

<style>
    div {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }
</style>
<div>
    <p onclick="someEvent()">aaaaaa</p>
    <p onclick="someEvent()">bbbbbbbbbbb</p>
    <p onclick="someEvent()">cccccccccccc</p>
</div>

You can also use text-align to align the text in multiple <p> tags within the <div/>.

<style>
    div {
        text-align: justify;
        white-space: pre-wrap;
    }
</style>
<div>
    <p onclick="someEvent()">aaaaaa</p>
    <p onclick="someEvent()">bbbbbbbbbbb</p>
    <p onclick="someEvent()">cccccccccccc</p>
</div>

CodePudding user response：

Use the CSS' property word-break: break-all to achieve the desired result.

.my-block {
  max-width: 75px;
  padding: 5px;
  word-break: break-all; 
}

.my-block--design {
  border: 1px solid red;
  border-radius: 3px;
  box-shadow: 0 0 3px 0 red;
}

<p >
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur officiis cupiditate placeat. Numquam, error dicta ea voluptatem cupiditate dolore, aperiam aspernatur at, quaerat est repellat possimus!
</p>

Please Note: Decrease the max-width manually for now, to see every letter-by-letter break. You can also use relative unit(s). For demo purposes, I've used an absolute unit. More here on JSFiddle