Hoe om woord-break op 'n streep?

Question

Gegewe 'n relatief eenvoudige CSS:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

Hoe maak ek dit so dat die string bly beperk tot die width van 150 , en eenvoudig vou om 'n nuwe reël op die koppelteken?

Answer 1

Vervang jou koppeltekens met hierdie:

­

Dit is 'n "sagte" koppelteken genoem.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

In alle moderne blaaiers ^* (en in sommige ouer blaaiers ook), die <wbr> element is die ideale hulpmiddel vir die verskaffing van die geleentheid om lang woorde breek op spesifieke punte.

Vir 'n kwotasie van wat verwys:

  

Die Woord Break Opportunity (<wbr>) HTML element verteenwoordig 'n posisie binne die teks waar die leser opsioneel 'n lyn kan breek, al is sy lyn breek reëls 'n breek op daardie plek nie anders sou skep.

Hier is hoe dit gebruik kan word om in byvoorbeeld die OP se (of sien dit in aksie by JSFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^* Ek dit in IE9, IE10, en die nuutste weergawes van Chrome, Firefox en Opera, en Safari het getoets.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Answer 3

As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, ­, and ​ none of which are fully supported either.

Answer 4

Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.

Additionally ­ won't work for your example, as it will either:

• work when word-breaking but when not word-breaking not display any hyphens, or

• work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.

Answer 5

In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Answer 6

Depending on what you want to see exactly, you can use a combination of hyphen, soft hyphen, and/or zero width space.

On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

Thus, if your code is something like :

111111­222222­-333333​444444-​555555

then your browser will show this with no word-break :

1111112222222-33333334444444-5555555

and this will every possible word-break :

111111-
222222-
-333333
444444-
555555

Just pick up the option you need. In your case, it may be the one between 4s and 5s.

Answer 7

You can also use :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

output:

abababababa
ababababbba
abbabbababa
ababb

word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.

Answer 8

The non-breaking hyphen works well.

HTML Entity (decimal)

‑

Answer 9

Instead of - you can use ‐ or \u2010.

Also, make sure the hyphens css property was not set to none (The default value is manual).

<wbr> is not supported by Internet Explorer.

Answer 10

Hope this may help

use <br>(break) tag where you want to break the line.

Answer 11

You can use 0 width space after hyphen character:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

if You want line break before hyphen use ​- instead.