Why does the "Width: --px" property not apply and limit the text-line width, unless I use "word-wrap: break-word"?

Answer 1

Hello,

Because you need to apply the width to the element containing the text.

For example, say you have this paragraph:

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo!</p>

To give it a width, create a rule targeting the <p> element like so:

p {

width: 200px;

}

Tip

I strongly recommend you DO NOT do something like this though.

The reason is that in this day and era of responsive sites and apps, we, more than ever, have to let the text do 'its thing'.

It's been my experience that whenever I've tried to manipulate text in one way or another, I end up generating more problems than solving them:

1. Text too narrow for wide screens
2. Text too wide for small screens
3. Generating horizontal scrollbars (which is very bad)
4. Generating empty spaces where I didn't intend

...to name a few.

My recommendation is that if you plan to define a width, declare it on the parent container of the text instead, like in this example:

<section class="description-container">

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo!</p>

</section>

.description-container {

width: 200px;

}

Granted, this is far less problematic than the first approach, but I would still consider this solution not 100% ideal necessarily.

Anyhow, let me know if you have any more questions.

Regards.