CSS - zobrazení dlouhého textu na dva řádky - prosím o radu

Proč neukážeš přímo kód? Takhle se můžeme jenom dohadovat, proč ti to nefunguje.

...
<li class="product">
    <a class="image" href="path">
        <img width="500" height="500"... />	
    </a>
    <a href="path">
        <strong>Long title</strong>
    </a>
    <span class="price"><strong><p>65,00 K&#269; bez DPH</p></strong><p>(75,00 K&#269; s DPH)</p></span>
...

Zobrazí se obrázek. Pod ním se vlevo zobrazí název a vpravo se zobrazí pod sebou dva názvy.
Pokud je však název vlevo příliš dlouhý a zasahuje do názvů vpravo, názvy vpravo se posunou dolů.
Nejen, že to vypadá nevzhledně, ale taky se změní jeho výška.
Pod obrázkem je však dost místa, aby se příliš dlouhý text zobrazoval na dvou řádcích. - To by celý problém vyřešilo

Pokud možno celý kód. Všimni si také, že sám máš v názvu dotazu "CSS" ale samotné CSS jsi nikde neuvedl.

Tady máš názornou ukázku.

Vpravo je vše v pořádku, ale Vlevo ne, protože je text příliš dlouhý a rozložení textu na dva řádky by celý problém mohlo vyřešit.

Pokud možno celý kód. Všimni si také, že sám máš v názvu dotazu "CSS" ale samotné CSS jsi nikde neuvedl.

Jak si přeješ.

Malo by stačiť nastaviť tomu elementu vľavo maximálnu šírku a spôsob zobrazovania (display) na inline-block. Druhá možnosť je použiť flexbox alebo grid.

Je to tak.

@MichalDM
Vy máte momentálně ten titulek i tu cenu jako řádkové elementy v jednom bloku dohromady. Ten titulek dosáhne konce řádku až na konci celého boxu s produktem a odsune další řádek s cenou vždy pod sebe. Musíte je buďto obalit do samostatných bloků (třeba div-ů), nebo jak radí moose je v CSS převést na inline-block.

Díky, nakonec jsem to udělal jinak. (Spanu, ve kterém je cena, jsem nastavil display: flex) Je to pouze seznam souvisejících produktů na konci stránky, takže to vadit nebude. (Běžně se u produktu to zobrazuje pod sebou)

Jen jsem se chtěl zeptat, jaký je rozdíl mezi

display: flex;

a

display: inline-flex;

V obou případech se to zobrazuje stejně, takže v čem je, prosím Vás, vlastně rozdíl?

Odporúčam prečítať: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ a https://www.w3.org/TR/css-flexbox-1/