Autor | Zpráva | ||
---|---|---|---|
Misha Profil * |
#1 · Zasláno: 5. 11. 2020, 12:00:56
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 |
#2 · Zasláno: 5. 11. 2020, 12:22:30
Nekoukal jsem na to, ale nepomůže
whitespace: nowrap; ?
|
||
Misha Profil * |
#3 · Zasláno: 5. 11. 2020, 12:36:05
Bubák:
To ne, zalomení textu je žádoucí. Problémem je to, že šířka se nezmění. |
||
Kcko Profil |
#4 · Zasláno: 5. 11. 2020, 20:31:47
Misha:
Zmenšuju okno a nic se neděje, cože to má dělat, vůbec nechápu co chceš. |
||
Misha Profil * |
#5 · Zasláno: 5. 11. 2020, 20:56:10
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% } |
||
Misha Profil * |
#7 · Zasláno: 5. 11. 2020, 21:42:47
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 |
#8 · Zasláno: 5. 11. 2020, 21:49:47
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. |
||
Časová prodleva: 3 dny
|
|||
Misha Profil * |
#10 · Zasláno: 8. 11. 2020, 16:08:13
Takže řešení neexistuje?
|
||
Serg Profil |
#11 · Zasláno: 8. 11. 2020, 18:00:36
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 * |
#12 · Zasláno: 9. 11. 2020, 10:03:11
Serg:
Display inline udělá podtržení všech řádků, ne jen posledního. |
||
Kajman Profil |
#13 · Zasláno: 9. 11. 2020, 10:09:53
Co obalit text v h1 do <span> a spodní okraj dát až spanu?
|
||
Misha Profil * |
#14 · Zasláno: 9. 11. 2020, 10:25:29
Kajman:
To jsme zase u toho, že to podtrhne všechny řádky. |
||
Kajman Profil |
#15 · Zasláno: 9. 11. 2020, 10:45:24
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. |
||
Časová prodleva: 7 dní
|
|||
Tomáš123 Profil |
#17 · Zasláno: 17. 11. 2020, 00:21:53
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.
|
||
Časová prodleva: 3 roky
|
0