1

Cómo puedo hacer para que el HTML realice automáticamente los saltos de línea si no cabe en el "div".

Ahora tengo este código, pero puse los "br", pero dependiendo del tamaño de la pantalla el texto parece en columna o no:

<h1 style="text-align:center; font-family: 'Ubuntu', sans-serif;" class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>

<p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
  {{ user.bio }}
</p>

<h3 style="text-align:left; font-family: 'Ubuntu', sans-serif; color: white;">
 Ejemplo de texto, que sobrepasa la columna hacia la derecha <br>Ejemplo de texto, que sobrepasa la column <br>Ejemplo de texto que no sobrepasa
</h3>
</div>

Cuando escribo un texto con "h3" para que parezca en una columna, en vez de mantenerse en columna se va ampliando por toda la pantalla en el sentido de que sobrepasa la columna como si no existiese, pero necesito que se mantenga como una columna. El texto está en un simple "div".

Alguien sabe cómo hacerlo?

3
  • @BetaM ya he añadido el código, creo que ya se entiende el problema. Commented el 12 oct. 2020 a las 12:28
  • @BetaM No soy un web master, cómo sé que estilos uso? Y no uso javascript, por lo que deduzco que no hay uso de frameworks. Commented el 12 oct. 2020 a las 12:36
  • 1
    En el código que muestras se ve que hay asignación de clases (para p y h1) cabe suponer que div (cuya apertura no muestras) también las tenga y esas clases pueden tener estilos asociados ej: .clase h3{...atributos} que determinan el comportamiento que te molesta. Se necesita ver un código más completo para poder ayudarte
    – quevedo
    Commented el 12 oct. 2020 a las 12:45

1 respuesta 1

1

Solución para que el texto no sobrepase una columna:

<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 100%;
  padding: 3px;
  height: 230px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<img style="display: block;margin-left: auto;margin-right: auto;width: 70%; " src="{{ user.avatar_url }}" class="circle mb-3" style="max-width: 300px;">
<h1 style="text-align:center; font-family: 'Ubuntu', sans-serif;" class="{% if site.style == 'dark' %}text-white{% endif %} mb-2 lh-condensed">{% if user.name %}{{ user.name }}{% else %}{{ user.login }}{% endif %}</h1>
<p class="mb-3 f4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">
  {{ user.bio }}
</p>

<div class="row">
  <div class="column">

    <h3 style="text-align:left; font-family: 'Ubuntu', sans-serif; color: white;">
      Texto para la columna <br>Toda esta línea no cabe completamente en la columna, pero automáticamente se va a particionar en diferentes líneas, lo he probado y funciona.</h3>
    <h3 style="text-align:left; font-family: 'Ubuntu', sans-serif; color: rgb(0, 128, 128);">
      <br>· Más texto que se mantiene:<a href="#"> TEXTO </a></h3>
  
  </div>
</div>

Publico la respuesta por si alguien también tiene este problema.

1
  • 2
    @BetaM no es por ofender pero lo único que has hecho desde que pregunté es venir a quejarte de todo lo que escribo, estaría bien que se buscasen más soluciones y menos pegas a todo. Repito, no es por ofender pero creo que estaría bien que la gente viniese a este foro a ayudar y a comprender, y no a lo otro. Commented el 12 oct. 2020 a las 14:21

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.