<div class="uyari">Tarayıcınız CSS text-wrap: balance; özelliğini desteklemiyor</div>

<h1 class="auto">CSS İpucu 35 - dikey ve yatay tanımlar için pratik çözüm</h1>
<code>text-wrap: auto</code>
<hr />

<h1 class="balans-ayari">CSS İpucu 35 - dikey ve yatay tanımlar için pratik çözüm</h1>
<code>text-wrap: balance</code>
<hr />

<h1 class="ayar">CSS İpucu 35 - dikey ve yatay tanımlar için pratik çözüm</h1>
<code>text-wrap: pretty</code>

h1 {
  text-align: center;
  font-size: 22px;
  margin-bottom: ;
}

.balans-ayari {
  text-wrap: balance;
}

.ayar {
  text-wrap: pretty;
}


@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800');

body {
  font-family: 'Merriweather Sans', sans-serif;
  width: 550px;
  margin-inline: auto;
}

.uyari {
  margin-inline: auto;
  margin-block: 20px;
  width: 550px;
  background-color: #fff;
  padding: 20px;
  border: 4px solid #e6b31a;
}

@supports (text-wrap: balance) {
  .uyari {
    display: none;
  }
}

code {
  font-size: 12px;
  display: block;
  text-align: right;
  color: blue;
}