2

Lo que tengo es una sangría de 100px en el h3 "Recogidas sin costo"

Puse debajo de el párrafo con muchas "a" pero al ejecutarlo, como pueden ver, la primera línea es la única que se adapta al h3 pero las otras ¡NO!

Me gustaría que quedara algo así:

   RECOGIDAS SIN COSTO
   aaaaaaaaaaaaaaaaaaaaaaaaaaaa
   aaaaaaaaaaaaaaaaaaaaaaaaaaaa
   aaaaaaaaaaaaaaaaaaaaaaaaaaaa
   aaaaaaaaaaaaaaaaaaaaaaaaaaaa

Aquí les dejo el CSS y el HTML. Disculpen si todo esta desorganizado es que ando practicando. Espero me hayan entendido gracias.

.acomo{
	text-indent: 100px;
	width: 500px;
	height: auto;
	word-wrap: break-word;
}

.acomo2{
	
	text-align: left;
	width: 450px;
	height: auto;
	word-wrap: break-word;
}
<div  style="width: 1300px; height: 300px;"  class="red-cube">
			
			<h3 class="acomo">
			RECOGIDAS SIN COSTO
				<p class="acomo2"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				</p>
		</h3>   			


		</div>

1
  • intenta exponer un poco mejor tu problema (o lo que esperas) para que te podamos ayudar mejor (entendiendo mejor la problemática). Te recomiendo que leas: ejemplo mínimo verificable. el 26 ago. 2019 a las 16:55

2 respuestas 2

6

Podrías simplemente reemplazar text-indent (que solo afecta al primer renglón) por margin-left (que afecta a la caja completa)

Ejemplo:

.acomo {
  margin-left: 100px;
  width: 500px;
  height: auto;
  word-wrap: break-word;
}

.acomo2 {
  text-align: left;
  width: 450px;
  height: auto;
  word-wrap: break-word;
}
<div style="width: 1300px; height: 300px;" class="red-cube">
  <h3 class="acomo">
    RECOGIDAS SIN COSTO
    <p class="acomo2"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </p>
  </h3>
</div>

1

La estructura es mejorable y se están aplicando estilos de manera poco hortodoxa. Creo que una buena optimización del código sería:

.red-cube {
  width: 1300px; 
  height: 300px;
}

.estiloContendor {
  padding: 3em;
  word-wrap: break-word;
  width: 500px;
  height: auto;
}

.acomo {
  /*estilo solo para h3*/
}

.acomo2 {
  text-align: left;
  height: auto;
  word-wrap: break-word;
  white-space: normal;
}

<div class="red-cube">
  <div class="estiloContendor">
  <h3 class="acomo">RECOGIDAS SIN COSTO</h3>
    <p class="acomo2"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </p>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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