[]
css width ve text uzunluğu
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ı?
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
(13.10.11 15:44:26)
Şunu dene :
width:100%;
width:100%;
- burka
(13.10.11 15:48:41)
<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>
<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 (13.10.11 15:57:13 ~ 15:59:27)
- night fury (13.10.11 15:57:32)
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
edit:
jsfiddle.net
- ocanal (13.10.11 16:06:30 ~ 16:12:07)
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ı.
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 (13.10.11 16:11:26)
ş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
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 (13.10.11 16:22:30 ~ 16:28:31)
display: inline;
bunu vermek yeterli olacaktır. ayrıca div yerine span kullanmak da başka bir seçenek.
bunu vermek yeterli olacaktır. ayrıca div yerine span kullanmak da başka bir seçenek.
- ency (13.10.11 16:27:24)
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.
ama bu sefer de margin-top:8px yapmama rağmen text kendisini en yukarıya alıyor otomatik olarak.
- night fury (13.10.11 16:33:17)
1
