it-swarm.com.de

Festlegen der Schriftgröße für einen Absatz, dessen Inhalt ständig ersetzt wird

Ich möchte eine Box mit einem Absatz darin setzen. Der Text dieses Absatzes soll nach jedem Klick auf den Button ersetzt werden. Und was für mich wichtig ist, ist, dass dieser Text einzeilig in der Box bleibt und nicht bricht. Dafür habe ich mich für das FitText.js-Plugin entschieden, weil Wörter unterschiedliche Längen haben (gegebene Wörter sind nur ein Beispiel). Durch das Festlegen als Tisch und Tabellenzelle habe ich eine Nice-Ausrichtung (vertikal und horizontal) erzielt. Haben Sie eine Idee, warum vorgegebener Code nicht so funktioniert, wie er sollte?

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];

var button1 = document.getElementById("give_me_a_name_please");

button1.addEventListener("click", function1);

function getRandomItem(array){
    return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
    var randomWord = getRandomItem(words); 
    document.getElementById('Word').innerHTML = randomWord;
}

$('#give_me_a_name_please').click(function() { 
    function resize () { $("#Word").fitText(0.6); } 
});
#parent_of_Word {
  width: 20%;
  height: 20%;
  top: 10%;
  left: 10%;
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: center;
  line-height: 100%;
  border: 5px solid black;
  Word-break: keep-all;
  white-space: nowrap;
}

#Word {
  color: brown;
  display:flex;
  align-items: center;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>


<div id="parent_of_Word">
    <p id="Word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>
19
wymyszony

Edit: aktualisiertes Code-Snippet und JSFiddle mit einer optimalen Schleife.

Ich habe Ihren Beispielcode so angepasst, dass er schlanker und verständlicher ist. Es verwendet auch reines jQuery anstelle einer Mischung aus jQuery und reinem JS und hört nicht auf "undefined" auf, nachdem die Taste mehrmals gedrückt wurde, was zu einem leeren Array führt. Stattdessen werden alle Wörter erneut durchlaufen.

Hier gibt es zwei Hauptlösungen.

  • Diese iterative Herangehensweise lässt sich von JavaScript Scale Text anpassen, um in festes Div zu passen wobei die Schriftgröße mit einem festen Wert beginnt und dann nach Bedarf verkleinert wird, bis die Breite des Word unter der Breite des Containers liegt. Ein Plugin ist nicht erforderlich, da dies äußerst trivial ist.
  • Der zweite Teil implementiert overflow:hidden, damit der Text bei einem so massiven Text, dass er unmöglich verkleinert werden kann (siehe untere Grenze von 8 in der while-Schleife), immer noch nicht aus dem Container ausbricht.

Siehe auch die JSFiddle-Version .

var words = [
  "Emily",
  "William Callum Smith Jr.",
  "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard",
  "EdwaaaaaaaaaaaaaaaaaaaAAAAAAAAAaaaaaAAaaaaAAAaaaaaaaaaaaaaaaaaaaaaaaaard",
  "Bradley",
  "The quick brown fox"
];

var changeWord = $("#change_Word");
var parentOfWord = $("#parent_of_Word");
var Word = $("#Word");
var idx = 0;

changeWord.click(function() {
  Word.text(words[idx++ % words.length]);
  var size = 40;
  Word.css("font-size", size);
  while (Word.width() > parentOfWord.width() && size > 8) {
    Word.css("font-size", --size);
  }
});
#parent_of_Word {
  width: 200px;
  height: 50%;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: center;
  line-height: 100%;
  border: 5px solid black;
  Word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}

#Word {
  color: brown;
  display: flex;
  align-items: center;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <button id="change_Word">Button</button>
</p>
<div id="parent_of_Word">
  <p id="Word">----------------</p>
</div>
8
BoffinbraiN

Um Ihren Text in einer Zeile zu haben, ohne zu brechen:

white-space: nowrap;

So zentrieren Sie alles vertikal und horizontal:

display:flex;
align-items: center;
justify-content: center;

Auf Ihr Beispiel angewendet:

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Resize this to see how it behaves on narrower screens. Lorem ipsum dolor sit amet bla bla bla, lorem ipsum dolor sit amet bla bla bla, lorem ipsum dolor sit amet bla bla bla.", "Bradley"];


var button1 = document.getElementById("give_me_a_name_please");


button1.addEventListener("click", function1);

function getRandomItem(array){
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
var randomWord = getRandomItem(words) || 'No more options.'; 
document.getElementById('Word').innerHTML = randomWord;
}

$( '#give_me_a_name_please' ).click(function() { 
function resize () { $("#Word").fitText(0.6); 
} 
});
#parent_of_Word {
  display: flex;
  align-items: center;
  justify-content: center;
  /* rest optional, just to demo 
  * vertical alignment 
  */  
  height: calc(100vh - 40px); 
  border: 1px solid red;
  padding: 1rem;
}

#Word {
  white-space: nowrap;
  border: 5px solid;
  padding: 1rem;
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: Ellipsis;
}
 * {
  margin: 0;
  box-sizing: border-box;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>


<div id="parent_of_Word">
<p id="Word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>
4

Dies liegt daran, dass Sie die width des #parent_of_Word als 20% definiert haben, was sich natürlich auf sein übergeordnetes Element bezieht, d. H. Das body - Element, basierend auf dem angegebenen Beispiel.

Daher kann die width des #parent_of_Word nicht einfach basierend auf der Breite des Inhalts dynamisch angepasst werden. Es kann nur "visuell verkleinert" zusammen mit seiner Elternbreite sein, aber es wird trotzdem 20% davon benötigt. Obwohl die verwendete Einheit % ist und die Breite des Elements is dynamic ist, ist sie dennoch festgelegt.

Meine Lösung wäre also, die width property wegzulassen und einfach die padding Ihrer Wahl zu definieren:

Hinweis: Ich habe das unnötige auskommentiert.

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];

var button1 = document.getElementById("give_me_a_name_please");

button1.addEventListener("click", function1);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1() {
  var randomWord = getRandomItem(words); 
  document.getElementById('Word').innerHTML = randomWord;
}

$('#give_me_a_name_please').click(function() {
  function resize() {
    $("#Word").fitText(0.6); 
  } 
});
#parent_of_Word {
  display: flex;
  /*width: 20%; the culprit*/
  height: 20%;
  padding: 0 20px; /* can also use [%] */
  position: absolute;
  top: 10%;
  left: 10%;
  /*text-align: center;*/
  justify-content: center;
  align-items: center; /* added; vertical alignment */
  /*line-height: 100%;*/
  border: 5px solid black;
  /*
  Word-break: keep-all;
  white-space: nowrap;
  */
  color: brown;
}

/*
#Word {
  color: brown;
  display: flex;
  align-items: center;
  justify-content: center;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>

<button id="give_me_a_name_please">Button</button>

<div id="parent_of_Word">
  <p id="Word">----------------</p>
</div>
3
VXp

Die einfachste Lösung für Ihr Problem besteht darin, den Breitenwert von #parent_of_Word in width:auto zu ändern. Dadurch wird die Breite automatisch an den Inhalt angepasst (automatische Anpassung an die Länge des Absatzes).

Arbeitsbeispiel: https://jsfiddle.net/18faLbap/4/

2
Jake Miller

Es gibt eine CSS-Methode, um Wörter in den Inhalt einzufügen

Ich deaktiviere grundsätzlich die absolute Breite Ihres #parent_of_Word und ändere die display in inline-block, so dass ihre Breite zum Inhalt passt. Um es schöner zu machen, füge ich eine padding-Eigenschaft hinzu. Die reduzierte und verbesserte Version Ihres Codes ist unten dargestellt.

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];

var button1 = document.getElementById("give_me_a_name_please");

button1.addEventListener("click", function1);

function getRandomItem(array){
    return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
    var randomWord = getRandomItem(words); 
    document.getElementById('Word').innerHTML = randomWord;
}
#parent_of_Word {
  top: 10%;
  left: 10%;
  display: inline-block;
  position: absolute;
  text-align: center;
  padding: 10px;
  border: 5px solid black;
  Word-break: keep-all;
}

#Word {
  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: brown;
  display:flex;
  align-items: center;
  justify-content: center;
}

#Word:hover {
    white-space: normal;
    }
<div id="parent_of_Word">
    <p id="Word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>

Sie benötigen die zusätzliche JavaScript-Bibliothek jetzt nicht mehr. Mehr Wissen findet man hier

0
Travor Liu
#parent_of_Word {
    min-width: 20%;
    width: auto;
    padding: 0px 20px;
}

Alles, was ich hier getan habe, ist Add-on width: auto und ein min-width:20%. Dadurch wird die Breite dynamisch, wenn der Text in der Box aktualisiert wird. In etwas padding hinzugefügt, damit es auch schön aussieht. Hoffe das hilft.

0
Ben Davies

Ich mache das normalerweise so, wenn ich Text in einer Zeile halten möchte. vor allem ich grids. Egal wie lang Ihre Box ist, sie wird in einer Zeile stehen und wenn Sie darauf schweben, wird sie zu Zeilen lesbar.

var words = ["Emily", "William Callum Smith Jr.", "Edwaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaard", "Bradley"];

var button1 = document.getElementById("give_me_a_name_please");

button1.addEventListener("click", function1);

function getRandomItem(array){
    return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
   
function function1(){
    var randomWord = getRandomItem(words); 
    document.getElementById('Word').innerHTML = randomWord;
}

$('#give_me_a_name_please').click(function() { 
    function resize () { $("#Word").fitText(0.6); } 
});
#parent_of_Word {
  width: 20%;
  
  top: 10%;
  left: 10%;
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: center;
  line-height: 100%;
  border: 5px solid black;
  Word-break: keep-all;

}

#Word {
  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: brown;
  display:flex;
  align-items: center;
  justify-content: center;
}

#Word:hover {
    white-space: normal;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>


<div id="parent_of_Word">
    <p id="Word">----------------</p>
</div>
<button id="give_me_a_name_please">Button</button>
0
molikh

Da Sie jQuery bereits auf der Seite haben, sollten Sie das jquery-textfill plugin verwenden:

http://jquery-textfill.github.io/

Dadurch wird sichergestellt, dass Ihr Text in Ihren Container passt.

0
hzsheikh