Home / Questions / 70800
Accepted
Critical Ghost
Asked: 2020-05-18 08:45:44 +0800 CST 2020-05-18 08:45:44 +0800 CST

How to avoid text overflow in a dialog?

  • 772

Good morning,

This is my code:

 <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>

Image of the dialog:

enter image description here

I need the text not to go over the edge of the dialog, that is to say that the text, instead of going over, stays inside the dialog and if it goes over, it extends down to show the full text.

EXAMPLE:

enter image description here

NEW CODE

I did some research and found a possible solution,

Code:

 <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">

        <p:outputPanel id="dirDetail" style="text-align:center;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>

the dialog as it is presented in the code is auto responsive therefore it will adjust depending on the number of characters.

but some computers have zoom in their browsers, so it looks very big and goes over the screen.

I was thinking if instead of auto-adjusting sideways, it would auto-adjust downwards.

primefaces

3 Answers

  1. Best Answer

    If you just want to break long words, you could use overflow-wrap: break-word. Microsoft used word-wrapto do something similar before, but when the rest of the browsers incorporated it, they gave it a name overflow-wrap( source ).

    With overflow-wrapyou specify to the browser how it should break the lines. The main values: normal(words are not broken, default value) or break-word(if there is a long word, it will be broken and part will appear on one line and part on the next line).

    So the code would look like this:

    <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
    <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
        <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar" style="overflow-wrap: break-word">#{busquedaBean1.autor.directorio}</a>
    </p:outputPanel>
</p:dialog>
    • 3

  2. The URL has text without spaces. I understand that this is the problem with the dialogue that you present in the first image. Add the word-break style to the <a> tag .

    <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" 
               target="_blank" 
               id="txtCopiar"
               style="word-break: break-all;">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>
    • 1

  3. Have you tried setting resizable = true?

    <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>

    • 0