Gewusst wie: Reduzieren Sie schriftart,-Größe, wenn Sie eine Linie Pausen

Habe ich eine Spanne innerhalb eines div und der div bleiben muss 200 Pixel breit und der text muss in eine Zeile passen innerhalb der div. Der text innerhalb der Spanne ist dynamisch generiert, so kann ich vielleicht wissen, welche Inhalte brechen in eine neue Zeile und welche nicht.

HTML:

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

Nutzen, wenn ich die CSS-Eigenschaft white-space:nowrap; die Worte verschütten auf der Außenseite des div, die wir natürlich nicht wollen.

Wie würde ich das reduzieren der font-size (oder zoom), basierend auf, wenn die Linie bricht, oder nicht? Ich würde lieber eine CSS-Antwort, aber ich verstehe, wenn außerhalb der CSS-Fähigkeiten.

Was ist der Grund für den Wunsch, es zu machen, alle auf einer Linie?
Möchten Sie vielleicht einen Blick auf ein third-party-lib wie fittext fittextjs.com. Als alternative, können Sie overflow: hidden; text-overflow: ellipsis zu zwingen, den text mit Auslassungszeichen und nicht verschütten außerhalb des div w3schools.com/cssref/css3_pr_text-overflow.asp
stackoverflow.com/questions/687998/...
Es muss in einer Zeile stehen, damit es nicht Durcheinander mit der Gestaltung der Seite @ShanRobertson.
Der gesamte text muss voll sichtbar sein, da dies wichtige Informationen für den Benutzer @floribon. Und ein plugin einfach nicht tun, die Seite nimmt schon mehr Zeit als ich möchte, es zu laden, so dass ich nicht wollen, um keine Anrufe mehr zu Bibliotheken.

InformationsquelleAutor ExcellentSP | 2015-02-12

Einen ziemlich fiesen Art: loop-Verringerung der überquellenden Spannweite bis zu seinem weniger, dass die div-Breite;

JS:

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");

HTML:

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

InformationsquelleAutor Alex K.

3

Ich würde vorschlagen, Lesung über CSS viewport-Einheiten. Das ist wahrscheinlich so nah an einer guten Lösung finden Sie in reinem CSS.
```
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/
- Aber das ist relativ zum viewport, nicht spezifische element. Nicht sicher, ob es so ist oder nicht, was würde erwarten, OP
- Stimmt, aber das ist der einzige dynamisch Größenänderung CSS-Einheit. Wenn er setzt eine statische viewport-Breite, er kann in der Lage sein Konto für einen großen Teil der Inhalte Möglichkeiten. Eine JS-Lösung wäre Platz für die Grenzfälle. stackoverflow.com/questions/14431411/...
- Diese Website ist responsive, und muss es so abwärtskompatibel wie möglich.
InformationsquelleAutor hopkins-matt

versuchen Sie dies, und fügen text hinzu, um das Ergebnis zu sehen

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

InformationsquelleAutor Tahmasb

0

Einen sehr speziellen Fall - wenn Sie an einer festen div-Größe und sind mit Angular.js:
1. definieren Sie eine Funktion, die testet, ob es ein Wort ist, das eingeschlossen werden (weil Sie wissen, wie viele Zeichen eine Zeile nehmen kann) und einen string zum angeben einer css-Klasse, die eine kleinere Schriftgröße:
```
$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;
    }

}
```
2. In Ihrer Vorlage hinzufügen einer css-Klasse, die nennen diese Funktion, die Sie definiert und so Ihre Klasse, "long-Wort-Titel", die angewendet werden können, wo nötig:
```
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}">
```
3. Fügen Sie css-Regel für kleinere text zu Ihrem stylesheet
InformationsquelleAutor Michael Discenza

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.