Question

我看过一些解决方案，使用TestCase来显示文本的几行，如果不适合则以“...”结尾。但是，我正在寻找一个CSS或JS解决方案，你可以有一个固定的高度（或行数），容器的宽度自然适应显示全文内容。

如果有必要，我可以制作一些图片来更好地解释我的需求。

希望存在解决方案！

Answer 1

这将是一个粗略的形式。

let quotes = [
      'I do not regret one professional enemy I have made. Any actor who doesn\'t dare to make an enemy should get out of the business.',
      'A man thinks that by mouthing hard words he understands hard things.',
      'To say that a man is made up of certain chemical elements is a satisfactory description only for those who intend to use him as a fertilizer.',
      'Security is a kind of death.',
      'The worst loneliness is not to be comfortable with yourself.',
      'The fact is, sometimes it\'s hard to walk in a single woman\'s shoes. That\'s why we need really special ones now and then to make the walk a little more fun.',
      'Behind the phony tinsel of Hollywood lies the real tinsel.'
    ],
    rows = 3,
    quote, lastQuote,
    $quote = $('.quote'),
    getDifferentQuote = function() {
      quote = quotes[Math.floor(Math.random() * quotes.length)];
      if (quote === lastQuote) {
        return getDifferentQuote();
      } else {
        lastQuote = quote;
        return quote;
      }
    },
    changeQuote = function() {
      quote = getDifferentQuote();
      let item = $('<span />', {
        text : quote,
        class: 'tester'
      });
      item.appendTo($('body'));
      let desiredHeight = item.height() * rows;
      item.css({
        whiteSpace: 'normal',
        width     : 30 + 'px'
      });
  
      while (item.height() > desiredHeight) {
        item.css({width: (item.width() + 1) + 'px'});
      }
      $quote.css({width: item.width() + 'px'});
      $quote.text(item.text());
      item.remove();
    };
$('button').on('click', changeQuote);
$(window).load(changeQuote);

.holder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  background-color: #f5f5f5;
  min-height: 100px;
}
.quote {
  text-align: center;
}
.tester {
  position: absolute;
  white-space: nowrap;
  display: block;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="quote"></div>
</div>
<button>Change quote</button>

选择随机引用，将其作为不可见的项目附加到正文，最初有1行
通过将其高度乘以nr来计算所需高度。行（本例中为3），
使其非常窄并且当它的高度大于所需的高度时，保持增加宽度。
在所需高度时，将其内容复制到“面板”中的元素并删除不可见项目。

当然，先决条件是确保不可见项目与我要用于展示的line-height，font-size和letter-spacing相同，在我的情况下是正确的，因为我没有设计任何一个。此外，如果显示项目有填充，则不可见的那个需要相同，或者您在计算时应考虑它。

Hackish，但它确实有效。有问题吗？

作为旁注，我上面描述的是changeQuote()函数内部。其余的只是助手（添加引号以包含各种长度的文本，确保引号不会重复的功能和其他细节 - 你不需要大部分这些东西）。

另一个注意事项：如果你在这里学习，你可能会发现我有用的东西。如果你在这里完成工作，你就在错误的网站上，恕我直言。正确的做法是聘请专业人士。

要理解为什么我使用隐形项目来做这件事：即使它非常快（比我预期的要快），如果我在理论上对可见项目做了它，它可能会导致渲染其中间状态的一瞥。让我们做一个测试，看不见的项目：

let quotes = [
      'I do not regret one professional enemy I have made. Any actor who doesn\'t dare to make an enemy should get out of the business.',
      'A man thinks that by mouthing hard words he understands hard things.',
      'To say that a man is made up of certain chemical elements is a satisfactory description only for those who intend to use him as a fertilizer.',
      'Security is a kind of death.',
      'The worst loneliness is not to be comfortable with yourself.',
      'The fact is, sometimes it\'s hard to walk in a single woman\'s shoes. That\'s why we need really special ones now and then to make the walk a little more fun.',
      'Behind the phony tinsel of Hollywood lies the real tinsel.'
    ],
    rows = 3,
    quote, lastQuote,
    $quote = $('.quote'),
    getDifferentQuote = function() {
      quote = quotes[Math.floor(Math.random() * quotes.length)];
      if (quote === lastQuote) {
        return getDifferentQuote();
      } else {
        lastQuote = quote;
        return quote;
      }
    },
    changeQuote = function() {
      quote = getDifferentQuote();
      let item = $('<span />', {
        text : quote,
        class: 'tester'
      });
      item.appendTo($('body'));
      let desiredHeight = item.height() * rows;
      item.css({
        whiteSpace: 'normal',
        width     : 30 + 'px'
      });
  
      while (item.height() > desiredHeight) {
        item.css({width: (item.width() + 1) + 'px'});
      }
      $quote.css({width: item.width() + 'px'});
      $quote.text(item.text());
      item.remove();
    };
$('button').on('click', changeQuote);
$(window).load(changeQuote);

.holder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  background-color: #f5f5f5;
  min-height: 100px;
}
.quote {
  text-align: center;
}
.tester {
  position: absolute;
  white-space: nowrap;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="quote"></div>
</div>
<button>Change quote</button>

它永远不会出现。它应该出现在按钮下面，但它永远不会呈现。至少不在我的机器上。很酷。

将文本限制为X行，但调整宽度以显示所有内容

1 个答案: