Hoe tekstomloop in HTML gebruiken?

Hoe kan tekst als aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadie de breedte van een div(zeg 200px) overschrijdt, worden ingepakt?

Ik sta open voor elke oplossing zoals CSS, jQuery, enz.

Antwoord 1, autoriteit 100%

Probeer dit:

div {
    width: 200px;
    word-wrap: break-word;
}

Antwoord 2, autoriteit 24%

Zorg ervoor dat in bootstrap 3 de witruimte niet is ingesteld als ‘nowrap’.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Antwoord 3, autoriteit 22%

Je kunt een zacht koppelteken gebruiken, zoals:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Dit wordt weergegeven als

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

als de bevattende doos niet groot genoeg is, of als

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

als dat zo is.

Antwoord 4, autoriteit 11%

div {
    // set a width
    word-wrap: break-word
}

De ‘word-wrap‘-oplossing werkt alleen in IE en browsers die CSS3ondersteunen.

De beste oplossing voor meerdere browsers is om uw server-side taal (php of wat dan ook) te gebruiken om lange strings te vinden en daarin met regelmatige tussenpozen de html-entiteit ​te plaatsen.
Deze entiteit breekt de lange woorden netjes af en werkt op alle browsers.

bijv.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Antwoord 5, autoriteit 4%

De enige die werkt in IE, Firefox, chrome, safari en opera als er geen spaties in het woord staan (zoals een lange URL) is:

div{
    width: 200px;  
    word-break: break-all;
}

Ik vond dit kogelvrij.

Antwoord 6, autoriteit 4%

Dit werkte voor mij

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Antwoord 7, autoriteit 3%

Een andere optie is ook het gebruik van:

div
{
   white-space: pre-line;
}

Hiermee worden al uw div-elementen ingesteld in alle browsers die CSS1ondersteunen (wat vrijwel alle gangbare browsers zijn vanaf IE 8)

Antwoord 8, autoriteit 2%

Cross-browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Antwoord 9

Voorbeeld van CSS-trucs:

div {
    -ms-word-break: break-all;
    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Meer voorbeelden hier.

Antwoord 10

Probeer in HTML-body:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

Probeer in CSS body:

background-size: auto;
table-layout: fixed;

Antwoord 11

Voeg deze CSS toe aan de alinea.

width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; 
padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left;

Antwoord 12

Probeer dit

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

.wrap-text {
     text-align:justify;
}

p {
  width: min-content;
  min-width: 100%;
}

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

div {display: inline;}

overflow-wrap: break-word;

width: 200px;
word-wrap: break-word;