¿Cómo ajustar el ancho de una etiqueta p automáticamente cuando se usa word-break:break-word para que sea igual al ancho necesario para el texto?

Un ejemplo: http://jsfiddle.net/ehs5v820/

Aquí, la etiqueta p debería equivaler a unos 160 px en lugar de 200 px.

Aquí el HTML y CSS relacionados del ejemplo:

.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>
css
0
M. Krol 26 ago. 2020 a las 15:23

1 respuesta

La mejor respuesta

Podría utilizar 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>
2
gbalduzzi 26 ago. 2020 a las 13:41