0

Estoy pintando la respuesta de un servicio dentro de un modal con innerHTML. Pero este no está respetando el ancho del propio modal y está escribiendo en la misma linea hasta el infinito.

El modal es un ngbModal de bootstrap https://ng-bootstrap.github.io/#/components/modal/api

Alguno ha tenido que lidiar con esto en algún momento? He probado a establecer un ancho al modal-content pero no ha servido.

La forma en la que pinto el texto es:

 <div [innerHTML]="info.text1"></div>

<div>
<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div [innerHTML]="info.text1">

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>

Se está viendo así: introducir la descripción de la imagen aquí

Actualizo con el HTML del modal. En css no tengo nada metido aún, simplemente probé con un .modal-body { width: 100px; }

2
  • Hola. Puedes por favor mostrar todo el html del Modal y un printscreen de como se esta viendo. Puede ser algo tan sencillo como colocar una propiedad css, pero necesitamos ver específicamente como se esta presentando el problema. si tienes css propio tuyo, es bueno que lo publique para ver que está pasando. Gracias! Commented el 10 dic. 2018 a las 17:17
  • Actualizado @MiguelAngelGonzalezPinto
    – Findelias
    Commented el 10 dic. 2018 a las 17:31

1 respuesta 1

0

Prueba lo siguiente:

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div [innerHTML]="info.text1" class="text-modal">

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

CSS

.text-modal{
  word-break : break-word;
  width: 100%;
}

Otra opción es si es solo un texto, es preferible que lo coloques en un span y no un div

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div>
        <span [innerHTML]="info.text1" class="text-modal"></span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

Puedes probarlo solo con el span, sin agregar la clase.

Otra cosa que te recomiendo y que esto puede ser generado por la forma en que lo estás insertando es, si solo es un texto que te devuelve un servicio, es mejor que lo coloques directamente en la etiqueta:

<div class="modal-content">
  <div class="modal-header">
    <h4 class="title">Prueab</h4>
  </div>
  <div class="modal-body">          
    <div>
        <span>{{info.text1}}</span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger button-close" (click)="close()"> CLOSE </button>
  </div>
</div>

Intenta y me cuentas cualquier cosa :D

4
  • Buenas. Ninguna de las soluciones me ha servido. me están devolviendo un texto dentro de una etiqueta <p> por eso estoy usando el innerHTML en vez de pintarlo directamente.
    – Findelias
    Commented el 11 dic. 2018 a las 10:33
  • Hola de nuevo. intenta darle un estilo a es etiqueta. .text-modal>p{word-break : break-word; display:none;} . Para ayudarte mejor, envía por favor el html resultante, no el de angular, si no como queda en la web, la estructura final. Commented el 11 dic. 2018 a las 15:59
  • O esto debería solucionarte el problema. p { word-break: break-all }. dale ese estilo a la etiqueta <p>. Me cuentas ;) Commented el 11 dic. 2018 a las 16:06
  • Al final lo he conseguido solucionar añadiendo al div el estilo: white-space: normal;
    – Findelias
    Commented el 12 dic. 2018 a las 9:41

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.