Bir div bloğundaki metnin taşmasını önleyebilir miyim?

Bir div bloğundaki metnin taşmasını önleyebilir miyim?

Div'deki taşan metnin gizlenmek veya kaydırma çubuğu yapmak yerine otomatik olarak yeni satır olmasını istiyorsanız,

word-wrap: break-word

Emlak.

Deneyebilirsin:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Daha fazla bilgi için taşma özelliği belgelerine göz atın .

Uzun metinleri kesmek için metin taşması CSS özelliğini kullanabilirsiniz.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

referans: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Bunu CSS ile kontrol edebilirsiniz, birkaç seçenek vardır:

• hidden -> Taşan tüm metinler gizlenecektir.
• görünür -> Metnin görünür şekilde taşmasına izin verin.
• kaydırma -> metin taşarsa kaydırma çubukları yerleştirin

Umarım yardımcı olur.

Basitçe şunu kullanın:

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

başka bir css özelliği var:

white-space : normal;

Beyaz boşluk özelliği, metnin uygulandığı öğede nasıl işleneceğini kontrol eder.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Sorunu gidermek için bu sınıfı eklemeyi deneyin:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Bu bağlantıda daha ayrıntılı açıklanmıştır http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? Veya otomatik. stil özniteliğinde.

Sanırım w3'ten temel bilgilerle başlamalısın

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Div'inizin css'de ayarlanmış bir yüksekliği varsa, div'in dışına taşmasına neden olur.

Her zaman div üzerinde minimum yüksekliğe sahip olmanız gerekiyorsa, div'e bir minimum yükseklik verebilirsiniz.

Min-height IE6'da çalışmaz, eğer IE6'ya özgü bir stil sayfanız varsa, IE6 için normal bir yükseklik verebilirsiniz. IE6'da içerisindeki içeriğe göre yükseklik değişir.

Min-genişliği css'de ayarlayabilirsiniz, örneğin:

.someClass{min-width: 980px;}

Kırılmayacak, yine de başa çıkmanız gereken kaydırma çubuğuna sahip olacaksınız.

Soruna CSS'nizin hangi bölümünün neden olduğunu nasıl yakalayacağınıza ilişkin öneriler:

1) style="height:auto;"tüm<div> öğeleri ayarlayın ve tekrar deneyin.

2) Kutunuzun ne kadar geniş bir alanı kapladığını görmek style="border: 3px solid red;"için tüm <div>öğeleri ayarlayın <div>.

3) height:#px;CSS'nizden tüm css özelliklerini kaldırın ve baştan başlayın.

Yani mesela:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

!! Önümüzde sabit kodlu takas !! Çevreleyen koda ve ekran çözünürlüğüne bağlı olarak bu, farklı / istenmeyen davranışlara neden olabilir.

Gizli taşma söz konusu değilse ve doğru tireleme gerekiyorsa, kelimenin / metnin bozulmasını istediğiniz yerde yumuşak tire HTML varlığını kullanabilirsiniz. Bu şekilde bir kırılma noktasını manuel olarak önceden belirleyebilirsiniz.

­

Kısa çizgi, yalnızca sözcüğün çevresindeki kapsayıcıdan taşmaması için kesilmesi gerektiğinde görünecektir.

Misal:

<div class="container">
  foo&shy;bar
</div>

Kap yeterince genişse ve metin kapsayıcıdan taşmayacaksa sonuç:

foobar

Kap küçükse ve metin aslında kapsayıcıdan taşacaksa sonuç:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Daha fazla bilgi: https://en.wikipedia.org/wiki/Soft_hyphen