Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak zmiescic napis w danym obszarze
Forum PHP.pl > Forum > Po stronie przeglądarki
marmal
Witam!!
Najlepiej chyba wyjasnic na przykladzie:

Fragment kodu:
  1. <div><span class="txt"> Jakis tekst</span></div>


Plik css:
  1. snap.txt {
  2. font-family: Times, serif;
  3. text-decoration: underline;
  4. text-align:center;
  5. font-size: 14px;
  6. letter-spacing: 3px;
  7. padding-left:15px;
  8. }



W Windowsie jest dobrze, ale jak sprawdze w Linuksie (co jest spowodowane innymi nieco czcionkami) to napis wyjezdza poza diva sad.gif
Przydalby sie jakis ogranicznik po prostu, cos w rodzaju max-width, ale dla span to nie dziala...
Macie pomysl jak to rozwiazac??


marmal
Zajec
Po pierwsze: snap.txt -> span.txt

Po drugie:
możesz dać
max-width: x;
display: inline-block;

Po trzecie:
div > span.txt { max-width: x } ? Tylko już nie jestem pewien czy takie coś dotyczy div czy span.
yavaho
W stylach tego DIVa daj:
  1. overflow:hidden;
Utnie (nie wyswietli) tego co wychodzi poza max rozmiary DIVa
- dlugie wyrazy beda uciete
+ div zachowa swoje wymiary i strona sie nie rozjedzie
marmal
Cytat(Zajec @ 2005-05-15 21:22:28)
Po pierwsze: snap.txt -> span.txt

Po drugie:
możesz dać
max-width: x;
display: inline-block;

Po trzecie:
div > span.txt { max-width: x } ? Tylko już nie jestem pewien czy takie coś dotyczy div czy span.

Co do pierwszego to literowka, bo pisalem to tutaj od nowa na potrzeby przykladu.

Drugie sprawdze - dzieki!!

Trzecie, cos nie kumam, chyba, ze to ma byc JavaScript??


marmal
revyag
Co do problemu to wystarczy ustawić odpowiedni padding dla spana i powinno być ok. Jeśli chodzi o max-width to nie można tego używać w odniesieniu do spana, bo jest on elementem liniowym.
marmal
Dziekuje wszystkim za pomoc!!

marmal
Zajec
Cytat(revyag @ 2005-05-16 09:18:21)
Co do problemu to wystarczy ustawić odpowiedni padding dla spana i powinno być ok. Jeśli chodzi o max-width to nie można tego używać w odniesieniu do spana, bo jest on elementem liniowym.

Zwróc uwagę, że dodałem
display: inline-block;
czyli mamy element liniowy o wnętrzu blokowym.

Niestety, inline-block nie rozumie FF. Wszystko inne radzi sobie z tym dobrze (Opera, Konqueror, IE)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.