Nasıl Yapılır: Bir satır kesilirse yazı tipi boyutunu küçültün

Bir divanın içinde bir açıklık var ve div 200px genişliğinde olmalı ve metin div içindeki bir satıra sığmalıdır. Açıklıktaki metin dinamik olarak oluşturulur, bu yüzden hangi içeriğin yeni bir satıra ayrılacağını bilmeyeceğim ve olmayacak.Nasıl Yapılır: Bir satır kesilirse yazı tipi boyutunu küçültün

Ben tabii ki istemiyoruz div dışına, hiç akacak CSS, tesisi white-space:nowrap; kelime kullanırsanız

<div style="width:200px"> 
 
    <span style="font-size:12px;">This sentence is too large to fit within the div.</span> 
 
</div>

Satır kesilip kesilmediğine bağlı olarak yazı tipi boyutunu (veya yakınlaştırmayı) nasıl azaltabilirim? Bir CSS cevabını tercih ederim, fakat bunun CSS'nin yeteneklerinin dışında olup olmadığını anlarım.

kaynak

2015-02-12 ExcellentSP

sebebi nedir için hepsini tek bir çizgide yapmak mı istiyorsunuz? –

http://fittextjs.com/, http://fittextjs.com/ gibi bir üçüncü parti kütüphaneye göz atmak isteyebilirsiniz. Alternatif olarak 'overflow: hidden; text-overflow: elipsin metnin elips içermesi ve divanın dışında dökülmemesi için http://www.w3schools.com/cssref/css3_pr_text-overflow.asp – floribon

http://stackoverflow.com/questions/687998/auto- boyut-dinamik-metin-dolgu-sabit-boyutu-konteyner –

Bir oldukça kötü bir şekilde, döngü onun daha az div genişliği olduğu kadar taşan yayılma azaltılması;

var divWidth = $("#theDiv").width(); 
 
var text = $("#text"); 
 
var fontSize = 12; 
 

 
while (text.width() > divWidth) 
 
    text.css("font-size", fontSize -= 0.5); 
 

 
text.css("display", "inline");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="theDiv" style="width:200px; border:1px solid red;"> 
 
    <span id="text" style="display:none;white-space:nowrap;">This sentence is too large to fit within the div.</span> 
 
</div>

kaynak

2015-02-12 18:59:14

Neden nasty @alex'i düşünürdünüz? – ExcellentSP

CSS viewport birimlerini okumayı öneririm. Bu, muhtemelen CSS'de bulacağınız iyi bir çözüme yakındır.

1vw = 1% of viewport width 
1vh = 1% of viewport height 
1vmin = 1vw or 1vh, whichever is smaller 
1vmax = 1vw or 1vh, whichever is larger

http://css-tricks.com/viewport-sized-typography/

kaynak

2015-02-12 18:50:41

Ancak bu, belirli bir öğe değil, görüntü alanlarına göre görülebilir. OP –

Doğru olmasını beklediğinden emin değilsiniz, ancak bu sadece dinamik olarak yeniden boyutlandırılan CSS birimidir.Statik bir görüntü genişliği ayarlarsa, içerik olasılıklarının büyük bir yüzdesini hesaba katabilir. Bir JS çözümü kenar kasaları kapsayacaktır. http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters –

Bu site yanıt veriyor ve geriye doğru olması gerekiyor Mümkün olduğu kadar uyumlu. – ExcellentSP

bu denemek ve bir sonuç

<HTML> 
<HEAD> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    var count = $("span").text().length; 
    var y = 1000/count ; 
    $('span').css('font-size',y); 

    }); 


</script> 
</HEAD> 
<BODY> 
    <div style="width:200px; border:1px solid black;"> 
<span style="font-size:12px;">This sentence is too large to fit within the div</span> 
</div>

kaynak

2015-02-12 19:00:47 Tahmasb

Eğer div boyut sabit ve angularjs kullanıyorsanız bir çok spesifik vaka görmek için metin eklemek:

, wil kelimesinin bir olup olmadığını sınar. l sarılmış (bir hat alabilir kaç karakter biliyorum çünkü) ve daha küçük bir yazı tipi boyutu olan bir css sınıfı belirtmek için bir dize döndürür olmak: Şablonunuzda

$scope.longWordSubstepTitleResize = function(title){ 
    var longestWord = title.split(' ').reduce(function(longest, currentWord) { 
     return currentWord.length > longest.length ? currentWord : longest; 
    }, ""); 
    if (longestWord.length>13){ 
     return "long-word-title"; 
    }else{ 
     return; 
    } 

}

, arayacak bir css sınıfı eklemek Bu işlev, tanımlanmış ve gerektiğinde bu yüzden sınıf, "uzun sözcük başlık", uygulanabilir:
```
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}"> 
```
sizin stil sayfasına küçük metin için css kuralı ekleyin

kaynak

2017-08-05 19:01:34

Nasıl Yapılır: Bir satır kesilirse yazı tipi boyutunu küçültün

cevap

İlgili konular