CODEWITHSUNDEEP
css
M. Krol
M. Krol

Reputation: 165

Width auto when using word-break: break-word

How to adjust the width of a p tag automatically when using word-break:break-word so it equals the needed width for the text?

An example: http://jsfiddle.net/ehs5v820/

Here the p tag should equal about 160px instead of 200px.

Here the related HTML and CSS from the example:

.wrapper {
  background-color: powderblue;
  width: 200px;
}

.wrapper p {
  width: auto;
  word-break: break-word;
  background-color: mistyrose;
}
<div class='wrapper'>
  <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
</div>

Upvotes: 0

Views: 1786

Answers (1)

gbalduzzi
gbalduzzi

Reputation: 10166

You could use display: inline.

.wrapper {
  background-color: powderblue;
  width: 200px;
}

.wrapper p {
  display: inline;
  word-break: break-word;
  background-color: mistyrose;
}
<div class='wrapper'>
  <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
</div>

Upvotes: 3

Related Questions