Autor Zpráva
Misha
Profil *
Ahoj všichni, prosím o radu,

mám nadpis v divu a ten nadpis má podtržení. Pomocí flexu jsem celý nadpis zarovnal. Ale teď ten problém... Jakmile zmenším DIV a text v nadpisu se zalomí, tak šířka H1 zůstane na 100%, přestože text je užší. Potřeboval bych aby se šířka H1 přizpůsobila textu.

náhled:
www.cssdesk.com/u2Vfs

Pro otestování změňte šířku divu třeba na 400px.
Bubák
Profil
Nekoukal jsem na to, ale nepomůže whitespace: nowrap;?
Misha
Profil *
Bubák:
To ne, zalomení textu je žádoucí. Problémem je to, že šířka se nezmění.
Kcko
Profil
Misha:
Zmenšuju okno a nic se neděje, cože to má dělat, vůbec nechápu co chceš.
Misha
Profil *
Kcko:
Proč okno? Píšu změňte šířku divu třeba na 400 px.
tomix
Profil
Misha:
A keď nastavíš, respektíve do štýlu doplníš
h1{
  width:80%
 } 
tak to nepomôže?
Misha
Profil *
tomix:
Zkoušel jsi to? Nepomůže.

Pro upřesnění. Podtržení má vypadat tak jako v případě, že je text na jednom řádku. Text může být různě dlouhý, protože se tahá z databáze. Bohužel při zalomení textu si H1 stále drží 100% přestože šířka je menší (ale neznámá).
tomix
Profil
Misha:

Pochopiteľne,že som to škúšal. Keď som nastavil širku h1 na 80%, tak sa H1 pri zmene šírky div-u napríklad na 400px sa H1 prispôsobil. Ale ak to nefunguje, tak už potom neviem čo chceš
Misha
Profil *
tomix:
Když nastavíš šířku na 80%, tak je pevně daná a nepřizpůsobuje se šířce obsahu.


Když změníš šířku DIVu na 400px a odkomentuješ ten width u H1, tak se zobrazí jak by to mělo vypadat. Jenže problém je, že se to pak bude zalamovat vždycky, ikdyž to není potřeba.
Misha
Profil *
Takže řešení neexistuje?
Serg
Profil
Aby byl podtržený jen text, tak na to jsem zkusil nastavit display: inline; pro h1, a musel jsem zrušit display: flex; u divu, ale tím se zase rozbilo vertikální vycentrování.
Misha
Profil *
Serg:
Display inline udělá podtržení všech řádků, ne jen posledního.
Kajman
Profil
Co obalit text v h1 do <span> a spodní okraj dát až spanu?
Misha
Profil *
Kajman:
To jsme zase u toho, že to podtrhne všechny řádky.
Kajman
Profil
A když se tomu spanu dá display:inline-block, tak to také není správně?
Misha
Profil *
Kajman:
Můžeš si to tam vyzkoušet. Když dáš inline-block, tak se to chová jako blokový prvek, takže tam pak ten span vůbec nemusí být.


No, nakonec jsem to vyřešil pomocí JQuery, ale je to takové nečisté řešení.

HTML:
<div>
  <h1><span>Hotely a restaurace</span></h1>
</div>

CSS:
div {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0 auto;
  width: 400px;
  height: 230px;
  padding: 0;
  text-align: center;
}
h1 {
    color: #3a3a3a;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    padding: 0 10px;
    line-height: 1.2;
    border-bottom: 7px solid #fbb911;
}

JQuery:
$(document).ready(function() {
    $('section .h1 h1').autoUnderlineSize();
});

$.fn.autoUnderlineSize = function() {
    $(this).width($('span', this).width() *1 + 1);
}

Samozřejmě je potřeba ještě nalinkovat knihovnu JQuery.


Samozřejmě místo "section .h1 h1" tam patří jen "h1". Zkopíroval jsem to ze svého projektu a zapomněl upravit strukturu.
Tomáš123
Profil
Misha:
To je dosť neelegantné. Šlo by nadpisu nastaviť display: inline, relatívnu pozíciu a na dno absolútne napoziciovať pseudoelement :after. Ostáva ešte odstrániť padding, pohrať sa s vertikálnym centrovaním, možno niečo ďalšie, ale vie to fungovať a je to krajšie ako jQuery.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0