javascript - para - tamaño de letra html




Cómo establecer el tamaño de fuente para un párrafo cuyo contenido se reemplaza constantemente (6)

Quiero establecer un cuadro con un párrafo en él. El texto de este párrafo debe reemplazarse cada vez que hago clic en el botón. Y lo que es importante para mí es que este texto debe permanecer dentro del cuadro como una sola línea y no romperse. Para hacerlo, decidí usar el complemento FitText.js porque las palabras tienen diferentes longitudes (las palabras dadas son solo un ejemplo). Al configurarlo como una tabla y una tabla-celda, he logrado una buena alineación (tanto vertical como horizontal). ¿Tienes alguna idea de por qué el código dado no funciona como debería?

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>


Como ya tiene jQuery en la página, considere usar el complemento jquery-textfill :

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

Se asegurará de que su texto se ajuste a su contenedor.


Edición: fragmento de código actualizado y JSFiddle con un bucle más óptimo.

He adaptado tu código de ejemplo para que sea un poco más ágil y fácil de entender. También utiliza jQuery puro en lugar de una mezcla de jQuery y JS puro y no se detiene en "indefinido" después de presionar el botón varias veces, lo que da como resultado una matriz vacía. En su lugar, volverá a recorrer todas las palabras.

Hay dos soluciones principales en efecto aquí.

  • Uno se inspira en este enfoque iterativo del texto de escala de JavaScript para ajustarse a la división fija, donde el tamaño de fuente comienza en un valor fijo, luego se reduce según sea necesario hasta que el ancho de la palabra sea menor que el ancho del contenedor. No hay necesidad de un plugin ya que es extremadamente trivial.
  • La segunda parte implementa el overflow:hidden modo que, en el caso de que el texto sea tan masivo que no pueda reducirse lo suficiente (vea el límite inferior de 8 en el bucle while), aún no saldrá de su contenedor.

Véase también la versión JSFiddle .

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>


Hay una forma CSS de encajar palabras en el contenido.

Básicamente, inhabilito el ancho absoluto de tu #parent_of_word y cambio la display a inline-block , para que su ancho se ajuste a su contenido. Para hacerlo más hermoso, agrego propiedades de padding . La versión reducida y mejorada de su código se muestra a continuación.

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>

Así que ya no necesitas la biblioteca extra de JavaScript ahora. Más conocimiento se puede encontrar here


La solución más sencilla a su problema es cambiar el valor de width:auto #parent_of_word a width:auto . Esto hará que el ancho se ajuste automáticamente según el contenido (los ajustes automáticos dependen de la longitud del párrafo).

Ejemplo de trabajo: https://jsfiddle.net/18faLbap/4/


Por lo general, lo hago con este enfoque cuando quiero mantener el texto en una línea. Especialmente las grillas. Así que no importa cuánto tiempo tenga su caja, estará en una sola línea y cuando se desplace sobre ella, se convertirá en líneas para que sean legibles.

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>


#parent_of_word {
    min-width: 20%;
    width: auto;
    padding: 0px 20px;
}

Todo lo que he hecho aquí es agregar width: auto y establecer un min-width:20% . Esto hace que el ancho sea dinámico cuando el texto se actualiza dentro del cuadro. Añadido en un pequeño padding para que se vea bien también. Espero que esto ayude.





jquery-plugins