Jak slovo-break na palubní desce?

hlasů
60

Vzhledem k relativně jednoduchý CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Jak mohu udělat to tak, že řetězec zůstane omezen na widtho 150 , a jen zalomí na nový řádek na pomlčkou?

Položena 04/08/2008 v 01:17
zdroj uživatelem
V jiných jazycích...                            


11 odpovědí

hlasů
63

Nahraďte spojovníky s výše uvedeným:

&shy;

Tomu se říká „měkký“ pomlčka.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Odpovězeno 04/08/2008 v 01:25
zdroj uživatelem

hlasů
31

Ve všech moderních prohlížečů * (av některých starších prohlížečích , i) je <wbr>element je ideálním nástrojem pro poskytování možnost zlomit dlouhé slovo v určitých bodech.

Citovat z tohoto odkazu:

Slovo Přestávka Opportunity ( <wbr>) HTML element reprezentuje pozici v textu, kde může prohlížeč případně zlomit čáru, ačkoli jeho pravidla řádkový zlom by jinak vytvoří přestávku na tomto místě.

Zde je návod, jak by mohla být použita v příkladu OP (nebo to vidět v akci na JSFiddle ):

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

* Testoval jsem to v IE9, prohlížeč Internet Explorer 10 a nejnovější verze prohlížeče Chrome, Firefox a Opera a Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Odpovězeno 30/01/2012 v 07:53
zdroj uživatelem

hlasů
17

Jako součást CSS3, není dosud plně podporována, ale můžete najít informace o slovní obtékání zde . Další možností je WBR tag, a plachý ;, a & # 8203; Žádný z nich jsou plně podporovány buď.

Odpovězeno 04/08/2008 v 01:25
zdroj uživatelem

hlasů
8

V tomto konkrétním případě (pokud vaše řetězec bude obsahovat spojovníky) bych změnit text na této straně serveru:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Odpovězeno 05/12/2008 v 13:36
zdroj uživatelem

hlasů
8

Váš příklad funguje podle očekávání v aplikaci Google Chrome, Safari (Windows) a IE8. Text vypukne z 150px pole ve Firefoxu 3 a Opera 9.5.

Navíc &shy;nebude fungovat pro váš příklad, jak to bude buď:

  • fungovat, pokud word-lámání, ale pokud není slovo rekordní nezobrazují žádné pomlčky, nebo

  • Práce není-li slovo prolomení, ale displej dvě čárky, když slovo prolomení neboť znamená spojovník na přestávku.

Odpovězeno 16/09/2008 v 00:15
zdroj uživatelem

hlasů
7

V závislosti na tom, co chcete vidět přesně, můžete použít kombinaci hyphen, soft hyphena / nebo zero width space.

Na měkkém pomlčky, protože Váš prohlížeč může word-break (přidání pomlčku). Na nulovou šířku prostoru, protože Váš prohlížeč může zlomit slovo (bez přidání cokoliv).

Proto, pokud váš kód je něco jako:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

pak váš prohlížeč zobrazí to s žádným slovem-break:

1111112222222-33333334444444-5555555

a to všechny možné slovo-break:

111111-
222222-
-333.333
444444-
555555

Jen vyzvednout možnost, kterou potřebujete. Ve vašem případě to může být tím, kdo mezi 4s a 5s.

Odpovězeno 16/09/2010 v 10:04
zdroj uživatelem

hlasů
1

Můžete také použít:

word-break:break-all;

ex.

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

výstup:

abababababa
ababababbba
abbabbababa
ababb

Slovo-break je rozbít všechny slovo nebo řádek, i když ne-space ve větě, která není nožky ve stanovené šířku nebo na výšku. Matice, že musíte být poskytnout šířku nebo výšku.

Odpovězeno 27/08/2015 v 12:40
zdroj uživatelem

hlasů
0

Můžete použít 0 šířka místo po spojovník znak:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

pokud chceš čára přestávka před pomlčkou použít &#8203;-místo.

Odpovězeno 13/09/2018 v 10:21
zdroj uživatelem

hlasů
0

Doufám, že to může pomoci

použijte <br>(zlom) štítek, kde chcete prolomit linii.

Odpovězeno 31/08/2017 v 10:53
zdroj uživatelem

hlasů
0

Místo toho -můžete použít &hyphen;nebo \u2010.

Také se ujistěte, že pomlčky vlastnost css byl není nastavena na none (Výchozí hodnota je manuální ).

<wbr>nepodporuje Internet Explorer .

Odpovězeno 14/05/2015 v 04:29
zdroj uživatelem

hlasů
0

Non-lámání pomlčka funguje dobře.

HTML entity (desítková)

&#8209;
Odpovězeno 21/03/2014 v 23:09
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more