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

Öncelikle <span> İçini Alt Satıra Nasıl İndirebilirim?

 10 Mesajlar 2.936 Okunma
lstbozum
tr.link

#1
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)
İlgili yazılar diye bir buton yaptım ancak mobil'de öncelikle ekran daraldıkça başlığın son kelimesinden başlayarak değil önce içerisindeki başlığın kendisinin alt satıra inmesini istiyorum, bunu nasıl yaparım?

Kod şu şekilde;
Detaylı Bilgi: Exotic Shorthair Kedi Cinsi Özellikleri ve Bakımı
Şu an ki halinin ekran görüntüsü: https://prnt.sc/stk6k1
İstediğim halini şu şekildeİ: https://prnt.sc/stk6xu


eklenmiş gibi etki yaratacak CSS kodu işini görür. @media kullanmayı biliyorum.

Tabi ekran daha da daralırsa şöyle olacak: https://prnt.sc/stk7es
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
wmaraci
reklam

#2
yetkilibiri yetkilibiri Yazılım Uzmanı Kullanıcı
  • Üyelik 28.05.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım Uzmanı
  • Konum İstanbul Avrupa
  • Ad Soyad E** Y**
  • Mesajlar 107
  • Beğeniler 41 / 41
  • Ticaret 2, (%100)
Detaylı Bilgi:
 

 

#3
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

yetkilibiri adlı üyeden alıntı

Detaylı Bilgi:


Hocam konuda bende bahsetmiştim "
gibi ama css ile olmalı" diye. Mobil'de kullanmak istiyorum html içerisine
verirsem masa üstünde de alt satıra inmiş olacak.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

#4
yetkilibiri yetkilibiri Yazılım Uzmanı Kullanıcı
  • Üyelik 28.05.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım Uzmanı
  • Konum İstanbul Avrupa
  • Ad Soyad E** Y**
  • Mesajlar 107
  • Beğeniler 41 / 41
  • Ticaret 2, (%100)
Bir çok yöntem var bootstrap kullanıyorsan col-sm-1 işini görür.

Onun haricinde css ile
white-space: pre;

Örnek:
https://www.w3schools.com/code/tryit.asp?filename=GFGEIGKT6HGD
 

 

wmaraci
wmaraci

#5
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

yetkilibiri adlı üyeden alıntı

Bir çok yöntem var bootstrap kullanıyorsan col-sm-1 işini görür.

Onun haricinde css ile
white-space: pre;

Örnek:
https://www.w3schools.com/code/tryit.asp?filename=GFGEIGKT6HGD



Estağfurullah hocam, aradığım şey white-space: pre; ancak bu sefer de alt satıra indikten sonra ekran daha da daralınca dışına taşıyor, o kısmı bir blok haline getiriyor ve parçalanamaz kılıyor.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

#6
yetkilibiri yetkilibiri Yazılım Uzmanı Kullanıcı
  • Üyelik 28.05.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım Uzmanı
  • Konum İstanbul Avrupa
  • Ad Soyad E** Y**
  • Mesajlar 107
  • Beğeniler 41 / 41
  • Ticaret 2, (%100)
white-space: pre-line; gibi diğer alternatifleri deneyin mobildeyim çok net bakamıyorum şuan.
 

 

#7
OrhanOzkercin OrhanOzkercin WM Aracı Kullanıcı
  • Üyelik 26.06.2015
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Eskişehir
  • Ad Soyad O** Ö**
  • Mesajlar 108
  • Beğeniler 33 / 21
  • Ticaret 3, (%100)
.dm-related-buton-right{
display:flex;
flex-direction: column;
}

Css dosyanıza bunu ekleyin hocam. Aşağıdaki linkte yazdım bakabilirisiniz.

Örnek: https://codepen.io/Orhando/pen/PoZwNqO
MuratDinc

kişi bu mesajı beğendi.

#8
AhmetKarabulut AhmetKarabulut WM Aracı Kullanıcı
  • Üyelik 11.09.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İzmir
  • Ad Soyad A** K**
  • Mesajlar 1077
  • Beğeniler 361 / 361
  • Ticaret 33, (%100)
https://www.w3schools.com/code/tryit.asp?filename=GFGN877DAXXA
MuratDinc

kişi bu mesajı beğendi.

#9
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

yetkilibiri adlı üyeden alıntı

white-space: pre-line; gibi diğer alternatifleri deneyin mobildeyim çok net bakamıyorum şuan.


Yok hocam white-space ile tüm yöntemleri denedim işimi görmedi.

OrhanOzkercin adlı üyeden alıntı

.dm-related-buton-right{
display:flex;
flex-direction: column;
}

Css dosyanıza bunu ekleyin hocam. Aşağıdaki linkte yazdım bakabilirisiniz.

Örnek: https://codepen.io/Orhando/pen/PoZwNqO


Bu şekilde tam istediğim gibi oldu hocam, @media ile mobil'e verdim şimdi istediğim gibi görünüyor. Ancak "display:block;" vermek daha doğru oluyor herhalde? Aradaki fark nedir anlayamadım?

AhmetKarabulut adlı üyeden alıntı

https://www.w3schools.com/code/tryit.asp?filename=GFGN877DAXXA


Bu şekilde oldu hocam, teşekkürler.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

#10
OrhanOzkercin OrhanOzkercin WM Aracı Kullanıcı
  • Üyelik 26.06.2015
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum Eskişehir
  • Ad Soyad O** Ö**
  • Mesajlar 108
  • Beğeniler 33 / 21
  • Ticaret 3, (%100)

SkyGhostAir adlı üyeden alıntı

Yok hocam white-space ile tüm yöntemleri denedim işimi görmedi.



Bu şekilde tam istediğim gibi oldu hocam, @media ile mobil'e verdim şimdi istediğim gibi görünüyor. Ancak "display:block;" vermek daha doğru oluyor herhalde? Aradaki fark nedir anlayamadım?



Bu şekilde oldu hocam, teşekkürler.


display:block da bu iş için çalışır hocam. Block yaptığınız da element tüm satırı kağlamış oluyor bir sonraki element alt satırdan başlamış oluyor. Display flex ise başlı başına bir konu, farklı kullanımları var.
 

 

Css eklenen resim nasıl sabitlenir?
Bootstrap hakkında grid düzeltmesi yapabilecek olan var 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