0

Quiero controlar el texto cuando se desborda de su contenedor por ser muy largo y que en el caso de que no se desborde se quede centrado pero no consigo hacer las dos cosas a la vez. Alguna idea?

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
  text-align-last: left; 

  
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  
    border: 1px solid red;
}
<div class='justify'>
  <p class="paragraph">Hola, esto es un texto muy pero que muy largo</p>
</div>

<div class='justify'>
  <p class="paragraph">Hola, esto es la palabra externomascloideo que no quiero se divida</p>
</div>

<div class='justify'>
  <p class="paragraph">Esto lo quiero centrado!</p>
</div>

1
  • 1
    Y cuando el texto se desborda ¿qué quieres que ocurra exactamente?
    – user128299
    Commented el 7 may. 2021 a las 16:56

1 respuesta 1

0

Puedes centrar y justificar al mismo tiempo asi:

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  
    border: 1px solid red;
}
<div class='justify'>
  <p class="paragraph">Hola, esto es un texto muy pero que muy largo</p>
</div>

<div class='justify'>
  <p class="paragraph">Hola, esto es la palabra externomascloideo que no quiero se divida</p>
</div>

<div class='justify'>
  <p class="paragraph">Esto lo quiero centrado!</p>
</div>

3
  • Quizás no me he explicado bien. En las dos primeras opciones quiero que no se desborde pero se quede alienado a la izquierda (no lo quiero centrado). En la tercera forma si que lo quiero centrado.
    – emgodi
    Commented el 7 may. 2021 a las 19:37
  • Los textos son fijos? Sabes el largo de cada uno? O son dinamicos y la longitud puede variar?
    – alanfcm
    Commented el 7 may. 2021 a las 19:50
  • No veo la importancia de que el texto sea fijo o dinamico. Son varios textos de longitudes distintas dentro de un contenedor de anchura definida por % . La solución de alancf me valdría si el resultado de los dos primeros recuadros rojo de la ejecución se alineasen a la izquierda y solo el tercero (al ser más corto que el ancho del contenedor) quedase centrado.
    – emgodi
    Commented el 8 may. 2021 a las 11:19

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.