Início / coding / Perguntas / 79175922
Accepted
gregsdennis
Asked: 2024-11-11 06:03:39 +0800 CST

Alterar o tamanho da fonte quando o conteúdo for truncado

  • 772

Tenho um div que pode conter texto realmente longo (mas nem sempre). O requisito é limitar o texto a três linhas e truncar com reticências. Já descobri essa parte.

O segundo requisito é que, quando o texto for truncado, preciso reduzir o tamanho da fonte, por exemplo, para 16 px (o tamanho é especificado no requisito, não apenas "algo menor").

div {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div>
  This is really long text that should
  definitely wrap for three lines and
  then terminate in an ellipsis if it's
  still too long, which it definitely is.
  It also needs to be a smaller font size.
</div>
<hr/>
<div>
  This text isn't long enough so it
  should be bigger.
</div>

É possível detectar quando o texto está truncado? Estou aberto a usar JS se necessário.

Soluções baseadas em largura como esta e esta não funcionam para mim porque elas só funcionam em texto de uma linha. Preciso de algo que funcione para texto truncado de várias linhas.

html

1 respostas

  1. Best Answer

    Se você estiver aberto a usar javascript, o código abaixo deve fazer o que você está procurando. Ele verifica se o texto está transbordando e então adiciona uma classe a ele. Neste caso, a classe tem apenas o tamanho de fonte de 16px, mas pode realmente ter qualquer estilo que você quiser.

    function adjustFontSizeForTruncatedText() {
  const elements = document.querySelectorAll('.trunc-text');

  elements.forEach(element => {
    // check if text is overflowing
    if (element.scrollHeight > element.clientHeight) {
      element.classList.add('truncated'); // smaller font size
    } else {
      element.classList.remove('truncated'); // original font size
    }
  });
}

adjustFontSizeForTruncatedText();

// rerun when the window is resized
window.addEventListener('resize', adjustFontSizeForTruncatedText);
    .trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}
    <div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>
<hr/>
<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>

    Aqui está outro método similar. Você pode escolher.

    document.querySelectorAll('.trunc-text').forEach(element => {
  if (element.scrollHeight > element.clientHeight) {
    element.classList.add('truncated');
  }
});
    .trunc-text {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s ease;
}

.truncated {
  font-size: 16px;
}
    <div class="trunc-text">
  This is really long text that should definitely wrap for three lines and then terminate in an ellipsis if it's still too long, which it definitely is. It also needs to be a smaller font size.
</div>

<hr/>

<div class="trunc-text">
  This text isn't long enough so it should be bigger.
</div>

    • 3

relate perguntas