javascript - letra - Cómo establecer el tamaño de fuente para un párrafo cuyo contenido se reemplaza constantemente

tamaño de letra en css

Question

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>

Answer 1

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.

Answer 2

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>

Answer 3

Esto se debe a que ha definido que el width de #parent_of_word es del 20% , que por supuesto está relacionado con su elemento principal , es decir, el elemento del cuerpo , según el ejemplo dado.

Por lo tanto, el width de #parent_of_word no se puede cambiar de tamaño dinámicamente en función del ancho de su contenido . Solo se puede "redimensionar visualmente" junto con su ancho principal , pero aún así, tomará el 20% de la misma. A pesar de que la unidad usada es % y el ancho del elemento es dinámico , todavía es fijo.

Así que mi solución sería omitir la propiedad de width y simplemente definir el padding de su elección:

Nota: He comentado lo innecesario.

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>

Answer 4

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

Answer 5

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/

Answer 6

Para tener su texto en una línea, sin romper:

white-space: nowrap;

Para centrar cualquier cosa vertical y horizontalmente:

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

Aplicado a tu ejemplo:

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>

Answer 7

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>

Answer 8

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