bu ikisini birleştirmenin bir yolu var mı?

html'de
<div id="bla bla ">
Ya herru ya merru
</div>

css'de
bla bla{
width: 120px;
}

sorum şu ki, ben burada 120px yazan yerine yukarıdaki text uzunluğuna göre ayarlayabilir miyim? örnek verecek olursam

ya herru ya merru için width:120 px olacakken
çekoslovaykalaştıramadıklarımızdan mısınız için width:400px olacak gibi.

bunu ayarlamanın bir yolu var mı?

 

min-width ve max-width.

emrag

Şunu dene :

width:100%;

burka

<html>
<head>
<style>
#firstdiv {
width:120px;
}
</style>
<script type="text/javascript" src="ajax.googleapis.com"></script>
<script type="text/javascript">
$(document).ready(function(){
var str = $('#firstdiv').html();
if(str.length > 40) {
$('#firstdiv').css('width','400px');
}
});
</script>
</head>
<body>
<div id="firstdiv">çekoslovaykalaştıramadıklarımızdan mısınız</div>

</body>
</html>

ocanal

i.imgur.com

tam olarak istediğim böyle bir şey.

emrag ve burka söylediklerinizi denedim ama olmadı.

night fury

son verdiğiniz resimdeki şeyin width ile ayarlandığını sanmıyorum, background-color verdiğiniz zaman div'in uzunluğu auto olduğu sürece otomatik kendi ayarlar onu. padding ile de kenarlardan boşluklu olmasını sağlayabilirsiniz.

edit:

jsfiddle.net

ocanal

paint'e kopyalarken öyle gözüktü. onu width ile ayarlamaya çalışmıyorum. demek istediğimi daha iyi anlatmak için bir örnek daha göndereyim.

i.imgur.com

belki böyle daha iyi anlaşılır olur. yukarıda görülen mavi kutucuktaki genişliği css'den kendi elimle ayarladım. ama yapmak istediğim kaç karakter olduğunu görüp, kendisinin ona göre bir width genişliği ayarlaması.

night fury

şimdi şöyle oluyor, div kullandığınız zaman doğrudan tüm satırı div olarak kapsar, width filan vermediğiniz zaman bir satırı tamamen kapsar.

bundan kurtulmanın bir diğer yolu da div'e position: absolute filan vermek. fakat ben position:absolute kullanamam sayfayı öyle tasarlamadım diyorsan eğer o zaman text'i div içinde yeni bir span filan kullanarak yazıp, background-color'ı span'e vermeniz gerekiyor.

iki örneğine de aşağıdaki linkten bakabilirsiniz, span kullandığınız zaman verdiğiniz background-color sadece text için geçerli olur. bu durumda text'in uzunluğuna göre width vermenize gerek olmadan verdiğiniz arka plan rengini text'in uzunluğuna göre kendisi ayarlar.

jsfiddle.net

ocanal

display: inline;

bunu vermek yeterli olacaktır. ayrıca div yerine span kullanmak da başka bir seçenek.

ency

display:inline satırı daha kullanışlı ve basit olduğu için onunla gideyim dedim.

ama bu sefer de margin-top:8px yapmama rağmen text kendisini en yukarıya alıyor otomatik olarak.

night fury
1

mobil görünümden çık