Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

CSS ile kelimeyi 2 satıra ayırma?

 7 Mesajlar 1.617 Okunma
acebozum
tr.link

#1
xFeyz xFeyz creative solutions Kullanıcı
  • Üyelik 05.02.2014
  • Yaş/Cinsiyet 28 / E
  • Meslek developer
  • Konum Bursa
  • Ad Soyad F** Ö**
  • Mesajlar 704
  • Beğeniler 195 / 222
  • Ticaret 8, (%100)

lorem ipsum

kodunu yazınca şu şekilde çıkmasını istiyorum;
lorem
ipsum
fakat h1 tagı içerisinde br tagı kullanmak istemiyorum, bu nedenle bunu css ile yapmak istiyorum. bu mümkün mü, nasıl yapılabilir?

aslında aklıma bir fikir geldi;
mesela, h1 tagını bir div içine alsam ve en uzun kelime kadar yeterli bir width versem, sonra da harf arası boşluğu arttırarak 2.kelimeyi alt satıra düşürsem. bu şekilde olur sanırsam. başka önerileri olan var mı? beyin fırtınası yapalım.
 

 

EFSANE! | omerbeyoglu.me
elektronikssl
webimgo

#2
TayfunGuler TayfunGuler Kod Şiirdir Kullanıcı
  • Üyelik 01.12.2013
  • Yaş/Cinsiyet 25 / E
  • Meslek -
  • Konum Ankara
  • Ad Soyad T** G**
  • Mesajlar 2229
  • Beğeniler 165 / 454
  • Ticaret 75, (%100)
h1 {float:left;width:100%;padding-top:15px}
h1 {float:left;width:100%;padding-bottom:15px}
h1 {float:left;width:100%;line-height:25px}

Dene :)
 

 

Wordpress/Php/React/Laravel/Codeigniter/Woocommerce işleriniz için Pm atınız.
www.tayfunguler.org

#3
pg13 pg13 Xcode. Kullanıcı
  • Üyelik 01.10.2013
  • Yaş/Cinsiyet 41 / E
  • Meslek BilişimTeknolojileri Mühendisi
  • Konum İstanbul Anadolu
  • Ad Soyad O** Ö**
  • Mesajlar 321
  • Beğeniler 72 / 101
  • Ticaret 11, (%100)

TayfunGuler adlı üyeden alıntı

h1 {float:left;width:100%;padding-top:15px}
h1 {float:left;width:100%;padding-bottom:15px}
h1 {float:left;width:100%;line-height:25px}

Dene :)



bu doğru bir yaklaşım değil.
kullanman gereken kod şu:

HTML


lorem
ipsum




CSS

h1>span{
display:block;
}
 

 

#4
sosyalmedya sosyalmedya Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 18.07.2012
  • Yaş/Cinsiyet 37 / E
  • Meslek Front End Developer
  • Konum İstanbul Avrupa
  • Ad Soyad S** A**
  • Mesajlar 219
  • Beğeniler 28 / 66
  • Ticaret 0, (%0)
Aynen Tayfun arkadaşın cevabı mantıklı değil.pg13'ün cevabı doğru.Ona ek olarak sadece ikinci kelimeye span verebilirsiniz.Böylelikle span olan kelimeye özel css de atayabilirsiniz.



Lorem Ipsum




h1 > span {
display: block;
color: tomato;
}
 

 

wmaraci
wmaraci

#5
chronocross chronocross wpdrk.com Kullanıcı
  • Üyelik 22.01.2015
  • Yaş/Cinsiyet 33 / E
  • Meslek öğrenci
  • Konum Aksaray
  • Ad Soyad Ç** D**
  • Mesajlar 76
  • Beğeniler 23 / 20
  • Ticaret 4, (%100)

Lorem
Ipsum




h1 {white-space: pre-line; }
cagdastakis

kişi bu mesajı beğendi.

wpdrk.com

#6
xFeyz xFeyz creative solutions Kullanıcı
  • Üyelik 05.02.2014
  • Yaş/Cinsiyet 28 / E
  • Meslek developer
  • Konum Bursa
  • Ad Soyad F** Ö**
  • Mesajlar 704
  • Beğeniler 195 / 222
  • Ticaret 8, (%100)
Tayfun Guler, ne yazık ki derdimi anlamamışsınız, yine de yardımcı olmak istediğiniz için teşekkürler.
pg13, Sosyal Medya, chronocross çözümleriniz için teşekkürler.
 

 

EFSANE! | omerbeyoglu.me

#7
TayfunGuler TayfunGuler Kod Şiirdir Kullanıcı
  • Üyelik 01.12.2013
  • Yaş/Cinsiyet 25 / E
  • Meslek -
  • Konum Ankara
  • Ad Soyad T** G**
  • Mesajlar 2229
  • Beğeniler 165 / 454
  • Ticaret 75, (%100)

pg13 adlı üyeden alıntı

bu doğru bir yaklaşım değil.
kullanman gereken kod şu:

HTML


lorem
ipsum




CSS

h1>span{
display:block;
}


ayrı h1 ler yan yana geliyor sanmıştım..
 

 

Wordpress/Php/React/Laravel/Codeigniter/Woocommerce işleriniz için Pm atınız.
www.tayfunguler.org
Ürün Detay Sayfası Resim Galerisi Nasıl Yapılır.
apple.com benzeri mobil site menü tasarımı
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al