0

  
 <p style=" background-color: rgba(0, 0, 0, 0.1);
 width: 100%;
 max-width: 300px;
 height: 100px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

La etiqueta <-p-> queda como si fuese un <-pre-> pero quiero hacer que cuando el texto sea muy largo el mismo se adapte en forma de párrafo, o sea que si es muy largo el texto que se adapte verticalmente y que respete el ancho que le estoy dando

3
  • 3
    ¿Podrías editar tu pregunta y agregar el código como texto? También te recomiendo realizar el recorrido de bienvenida para ganar tu primer medalla.
    – Marcos
    el 2 jun. 2021 a las 19:30
  • Sería bueno que al hacer tus preguntas compartas el código en texto y no en imagen. el 2 jun. 2021 a las 19:32
  • Imagenes como texto y te ayudarán de inmediato.
    – Excorpion
    el 2 jun. 2021 a las 19:43

2 respuestas 2

1

Analizando lo que quieres lograr (según tu pregunta), el siguiente estilo CSS debe ser así:

.parrafo {
 display: flex;
 justify-content: center;
}

.parrafo p {
  background-color: rgba(0,0,0, .1);
  width: 100%;
  max-width: 300px;
  height: 100px;
  
  margin: auto;
  white-space: wrap;
  overflow: hidden;
}

Con el siguiente html:

<div class="parrafo">

 <p>
   Texto del párrafo alineado al centro sin rebasar su contenedor padre ni a su propio height...
 </p>

</div>
0

Tienes 2 opciones a mi parecer...
1, Controlar el overflow... esto es el excedente que tengamos, y podríamos usarlo mejor para el height, si es que quieres aplicarlo.
2, Controlar el word-wrap

En este caso, usaremos word-wrap para ajustar el texto dentro del contenedor.
Para ello agregamos word-wrap, y le damos break-word, que romperá la palabra para que pueda entrar dentro del contenedor.

Si necesitases mantener una palabra completa, igual usarías el word-wrap, pero "normal" así no romper la palabra, y que si entre el el contenedor.

<p style="
 background-color: rgba(0, 0, 0, 0.1);
 width: 100%;
 max-width: 300px;
 word-wrap: break-word;
 height:100px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

<p style="
 background-color: rgba(0, 0, 0, 0.1);
 width: 100%;
 max-width: 300px;
 word-wrap: break-word;
 height:100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.