CSS3 Uzun Metinleri Alana Sığdırmak ( word-wrap )

Anasayfa

CSS eğitim serimize devam ediyoruz.Bu derste alanımızdan taşan uzun metinleri sığdırmayı göreceğiz.Sığdırmayı sağlayan kodumuz word-wrap tır.Hemen bir örnek yapalım.



<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

	<style type="text/css">

		.metin{width:150px;background:#ddd;}

	</style>

</head>

<body>



<div class="metin"> cArleonecArleonecArleonecArleonecArleone cArleonecArleonecArleone cArleonecArleone </div>

	

</body>

</html>

Görüntüsü :

http://ustaderslik.com/resim/ders/8a8s5d4.png

Gördüğünüz gibi metin alandan taşıyor.Normalde overflow ile taşanı gizleyebilir veya taşan alanı göstermek için scroll koyabiliriz.

.metin e word-wrap:break-word; verirseniz metinler tam sığacaktır.

.metin{width:150px;background:#ddd;word-wrap:break-word;}

Görüntüsü :

http://ustaderslik.com/resim/ders/fg8fdg8.png

Gördüğünüz gibi artık tam olarak sığıyor.word-wrap 2 parametresi var diğeride normal.Taşan haline döndürüyor.

CSS3 Uzun Metinleri Alana Sığdırmak ( word-wrap )

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik