Czy da się zrobić coś takiego aby przy dwóch liniach tekstu dla jak w przykładzie usunać nieużywane pole ze spana? Występuję to np. przy szerokości ekranu wynoszącej 725px (dołączam screena).
0
1
Możesz użyć CSS media query. Przykład: https://jsfiddle.net/ydxe568p/
0
kaczor19 napisał(a):
Czy da się zrobić coś takiego aby przy dwóch liniach tekstu dla jak w przykładzie usunać nieużywane pole ze spana? Występuję to np. przy szerokości ekranu wynoszącej 725px
(...)
Tylko, że ten cały napis ma się wyświetlać na wszystkich szerokościach ekranu.
To kompletnie nie rozumiem, co w takim razie chcesz usunąć i w jakich okolicznościach.
0
Jakie puste pole? Masz na myśli to tło?
0
Chodzi mu prawdopodobnie o to, żeby kontener z tekstem kończył się zaraz za tekstem, kiedy ten tekst jest przełamany. W sumie ciekawa zagwozdka, czemu to się tak zachowuje.
0
Czuję się zagięta. Nie mam koncepcji, jak to zrobić, a nie mam też czasu, żeby nad tym dłużej medytować.
0
Przecież to jest proste, wystarczy wprowadzić wartości procentowe, np. szerokość 60% i już się zmienia, jak wrzucasz taki surowy kod to wiadomo, że będzie kupa.
0
czysteskarpety napisał(a):
Przecież to jest proste, wystarczy wprowadzić wartości procentowe, np. szerokość 60% i już się zmienia, jak wrzucasz taki surowy kod to wiadomo, że będzie kupa.
Ale on chce, żeby przy każdej szerokości ekranu kontener z tekstem kończył się równo z tekstem. A jak ten tekst jest przełamany, to kontener wydłuża się na całą dostępną przestrzeń body. Eksperymentowałam z różnymi ustawieniami i nie umiem tego uzyskać.
0
Nie wiem, czy jest to w ogóle możliwe bez użycia js`a.
0
serek napisał(a):
Nie wiem, czy jest to w ogóle możliwe bez użycia js`a.
Podejrzewam, że da się jakoś pokombinować z dwiema komórkami tabeli, ale nie chce mi się już nad tym po północy siedzieć.
0
Ja poświęciłem jakieś 15 minut i też nie dałem rady, co ciekawe nigdy się nie spotkałem z tym przypadkiem - wydaje się dosyć prosty a tu lipa ;)
Może zadaj to pytanie na stackoverflow.com?
0
Przecież jest coś takiego jak width: fit-content; czyli szerokość dostosowana do treści i wszystko w temacie :)
0
czysteskarpety napisał(a):
Przecież jest coś takiego jak
width: fit-content;czyli szerokość dostosowana do treści i wszystko w temacie :)
To spróbuj mądralo. Zanim się poddałam, eksperymentowałam m.in. z:
width: max-content;
width: min-content;
width: fit-content;
0
@Freja Draco bo pewnie trzeba powalczyć z white-space.
1
czysteskarpety napisał(a):
@Freja Draco bo pewnie trzeba powalczyć z
white-space.
Próbowałam chyba wszystkiego Z czym by nie kombinować, ostatecznie możliwości są trzy:
- albo cały napis jest zawsze w jednej linii - ale nie to chodzi,
- albo napis jest zawsze pozwijany - ale nie o to chodzi,
- albo napis zawija się zależnie od ilości dostępnego miejsca - ale wtedy kontener zachowuje się trochę nielogicznie.
0
Takie zachowanie jest naturalne.
Zazwyczaj content po wyświetleniu nie zmienia swojej szerokości.
Nie stosuje się jednego spana wiszącego w powietrzu, nie widzę takiego zastosowania.
Aby uzyskać efekt jaki chcesz za pomocą cssa można zrobić to np tak:
span{
display: inline-block;
color: blue;
background: grey;
}
@media only screen and (max-width: 600px){
span{
margin: 0 100% 0 0;
}
}
Ważne, aby max-width był większy niż span po zwrapowaniu, wtedy efekt jest w miarę do przyjęcia.
JS:
Można też dać eventa na wrap do spana i dać mu margines jak w powyższym przykładzie, a gdy szerokość ekranu się zwiększy usunąć tą wartość (wartość przy której się wrapuje trzeba wcześniej zapisać gdzieś w zmiennej).
Pewnie da się jeszcze inaczej, to mi przyszło do głowy.
0
No tak, to każdy potrafi, ale kombinujemy nad jakąś uniwersalną metodą.
Jedyne, co mi przychodzi do głowy to obróbka JS-em.