maxWidth özelliği, elementin ulaşacağı en fazla genişlik değerini belirler. Bu özelliğin IE 7+ sürümlerinde kullanılabilmesi için !DOCTYPE ile doküman tipinin belirtilmesi gereklidir.
DOM Sözdizimi
element.style.maxWidth = "genislik"
CSS Sözdizimi
max-width: genislik
| genislik | Aşağıdaki değerleri alabilir.
- none : Genişlik limiti olmadığını belirtir. Genişlik otomatik belirlenir.
- Yüzde değer : Elementin içinde bulunduğu ana bloğun yükseklik değerine oranlanmasıyla belirlenir.
- CSS Ölçü Değerleri : En fazla genişliğin, net olarak belirlenmesini sağlar.
|
Aşağıdaki örnek, sabit yüksekliğe sahip bir div elementinin görünen içerik genişliğinin maxWidth ile sınırlandırılarak overflow özelliği ile taşma kontrolünün uygulanmasını göstermektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
div#ornekDiv {
height:150px;
overflow:auto;
}
</style>
<script type="text/javascript">
function azGoster() {
document.getElementById("ornekDiv").style.maxWidth = "100px";
}
function ortaGoster() {
document.getElementById("ornekDiv").style.maxWidth = "200px";
}
function limitYok() {
document.getElementById("ornekDiv").style.maxWidth = "none";
}
</script>
<input type="button" value="Az Göster ( 100px )" onClick="azGoster()" />
<input type="button" value="Normal Göster ( 200px )" onClick="ortaGoster()" />
<input type="button" value="Limit Yok" onClick="limitYok()" />
<div id="ornekDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
Test Edin