Gewusst wie: Reduzieren Sie die Schriftgröße, wenn eine Zeile

Ich habe eine Spanne innerhalb eines div und das div muss 200px breit bleiben und der Text muss auf eine Zeile innerhalb der div passen. Der Text innerhalb der Spanne wird dynamisch generiert, so dass ich nicht wissen kann, welcher Inhalt in eine neue Zeile springt und welcher nicht.Gewusst wie: Reduzieren Sie die Schriftgröße, wenn eine Zeile

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

Wenn ich die CSS-Eigenschaft white-space:nowrap; die Wörter verwenden, um die Außenseite des div verschütten, die natürlich wollen wir nicht.

Wie würde ich die Schriftgröße (oder den Zoom) basierend darauf reduzieren, ob die Linie bricht oder nicht? Ich würde eine CSS-Antwort bevorzugen, aber ich verstehe, wenn das außerhalb der Fähigkeiten von CSS liegt.

Quelle

2015-02-12 ExcellentSP

Was ist der Grund, zum Möchten Sie alles auf einer Linie machen? –

Vielleicht möchten Sie sich eine Drittanbieter-Bibliothek ansehen, z. B. fittext http://fittextjs.com/. Als Alternative können Sie 'overflow: hidden; Text-Überlauf: Ellipse, um den Text zu erzwingen, haben Auslassungspunkte und nicht außerhalb des Div http://www.w3schools.com/cssref/css3_pr_text-overflow.asp – floribon

http://stackoverflow.com/questions/687998/auto- size-dynamic-text-to-fill-fixed-size-container –

Eine ziemlich unangenehme Weise abnehmend Schleife der überquellende Spanne, bis seine weniger, daß die div Breite;

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>

Quelle

2015-02-12 18:59:14

Warum würdest du es als bösen @alex betrachten? – ExcellentSP

Ich würde vorschlagen auf CSS-Viewport-Einheiten nachzulesen. Das ist wahrscheinlich so nah an einer guten Lösung, wie Sie es in reinem CSS finden.

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/

Quelle

2015-02-12 18:50:41

Aber das ist relativ zum Viewport, nicht spezifisches Element. Nicht sicher, ob es ist oder nicht, was erwarten würde OP –

True, aber das ist die einzige CSS-Einheit dynamisch skalieren.Wenn er eine statische Ansichtsfensterbreite einstellt, kann er möglicherweise einen großen Prozentsatz der Inhaltsmöglichkeiten berücksichtigen. Eine JS-Lösung würde die Randfälle aufnehmen. http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters –

Diese Website reagiert, und es muss so rückwärts sein kompatibel wie möglich. – ExcellentSP

versuchen dies und Text hinzufügen, um das Ergebnis

<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>

Quelle

2015-02-12 19:00:47 Tahmasb

Eine sehr spezifische Fall-, um zu sehen, wenn Sie div eine feste Größe haben und verwenden Angularjs:

Definieren Sie eine Funktion, die prüft, ob ein Wort vorhanden ist l gewickelt werden (weil Sie wissen, wie viele Zeichen eine Linie dauern kann) und gibt eine Zeichenfolge, die eine CSS-Klasse angeben, die eine kleinere Schriftgröße hat:

$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; 
    } 

}

in Ihrer Vorlage eine CSS-Klasse hinzufügen, nennen Sie mit dieser Funktion definiert und so Ihre Klasse, „long-Wort-Titel“, kann angewandt werden, wenn erforderlich:
```
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}"> 
```
CSS-Regel Ihren Stylesheet für kleineren Text hinzufügen

Quelle

2017-08-05 19:01:34

Gewusst wie: Reduzieren Sie die Schriftgröße, wenn eine Zeile

Antwort

Verwandte Themen