DIV zalomení řádku

to protože div je blokový element, a span je riadkový element.

div je možné zmeniť na riadkový pomocou CSS vlastnosti:

display: "inline";

pre nezalomenie na konci riadku je potrebné buď zakázať wrap skrz vlastnosť word-wrap alebo nastaviť horizontálne scrollovanie skrz vlastnosť overflox-x: "scroll";
alebo skrátiť / odrezať časť textu ktorá sa na riadok nezmestí. A ešte tu existuje CSS vlastnosť float, ktorá nasledujúci element umiestni na nejakú stranu voči predchádzajúcemu, hodnoty sú left, right, none;

konkrétne čo použiť záleží od situácie čo chcete dosiahnuť.


E: na white-space o ktorom píše Tomášeek som aj zabudol.

Dennyyy:
Div je blokový, tak je jasné, že se to sousloví osamostatní na novém řádku :-)

Použij buď span s white-space: nowrap, nebo mezery nahraď za nedělitelné ( ).

Tomášeek:
skrz entitu   bych to neriešil. Kdyby to byl trebárs článok o tisícok slov, tak to psát by bolo dosť utrpenie, i když existujú spôsoby jak to rovno nahradiť všetky, ale okrem toho aj kód by bol neprehľadný, a krom toho ešte by to horšie bolo použitelné, kdyby sa manipulovalo s DOM či vykonávali iné zložitejšie veci v JS. A znefunkční to aj určité pseudoselektory, ktorými môžeš označiť napríklad druhé slovo z každého riadku.

Mlocik97:
Nevíme o kontextu toho spojení, je to jedna z variant.

Ono k tomu tvému příspěvku jsem se vyjadřovat moc nechtěl, ale kombinace div s display: inline je velmi elegantní, bohužel ale nic neřeší. Overflow? Float? Proboha, proč? To je jedno, zapomeň na to, že jsem něco o řádek výše napsal.

Tomášeek:
ako v pohode, trebárs to white-space na to som aj pozabudol.

display: inline / inline-block, aj float to rieši. Overflow som spomenul so zalomením na konci riadku, nie až tak v spojení "blokovosť" elementu.

Samozrejme dobré riešenie je použiť jednoducho span a nie div.

Mlocik97:
„display: inline / inline-block, aj float to rieši.“
Eh?

Když budu mít kód, dle zadání např. tento, kde tučně zvýrazněná část má být nedělitelná:

Jak konkrétně tu nedělitelnost řeší float? Display: inline[-block]? Overflow neřeší v tomhle topicu absolutně nic. Plácáš nesmysly.

Float neřeší nic, jen to zobrazení rozbije (zkus si dát flotovaný prvek do toho kódu výše). A jestli bereš <div style="display: inline"> jako ekvivalent k <span>, tak sorry. Pak se nemáme asi o čem bavit, navíc to neřeší vůbec dotaz.

Asi s tebou dál nebudu ztrácet v tomhle topicu čas, tazatel vyřešil svůj problém (tipuji nedělitelnými mezerami, nebo nastavením white-space). Tím je pro mě uzavřen.

Tomášeek:
lenže to je uplne iny pripad než rieši tazatel, ak som teda spravne pochopil tazatele

Tomášeek:
„A jestli bereš <div style="display: inline"> jako ekvivalent k <span>, tak sorry.“
Ja to tak beriem (nemyslím tak, že používam modifikvaný div namiesto spanu). Môžeš vysvetliť prečo si myslíš, že to v kóde nevytvorí prvky s ekvivalentnými vlastnosťami, prosím?

Mlocik97m:
Súhlasím, že použitie z prvého príspevku vôbec nevyplýva, ale Dennyyy je očividne začiatočník; zaplaviť ho desiatkou riešení mu nepomôže. Ideálne je treba zistiť aká je situácia, navrhnúť správne riešenie a prípadne doplniť alternatívy, ktoré sú relevantné a ich použitie by mohlo za určitých okolností dávať zmysel. Float v tomto prípade zmysel rozhodne nedáva, pozícia takého prvku navyše všeobecne nesúvisí s predchádzajúcim elementom. Vymazať časť textu, ktorá sa nezmestí na riadok problém odstráni, nie rieši. Ťahať sem overflow je blbosť, napácha viac škody ako úžitku.

Tomáš123:
„Môžeš vysvetliť prečo si myslíš, že to v kóde nevytvorí prvky s ekvivalentnými vlastnosťami, prosím?“
Nemyslím si, že to nevytvoří prvek s ekvivalentními vlastnostmi. Ale radit to, je nesmysl, navíc v tématu, které řeší něco jiného.

Stejně tak je nesmysl radit něco ve stylu, Místo <span> použij <blockquote style="margin: 0; font-style: normal; display: inline;">, bude to vypadat stejně.

To znamená, vizuálně a sémanticky (ta je v případě spanu/divu neutrální) jsou ty dva zápisy podobné, ve skutečnosti znásilnit blok, aby byl řádkový, když existuje přímo řádkový prvek, je prostě nesmysl.

Tomášeek:
preto som psal že span je lepšie riešenie než div s display inline