css 如何将字符串缩短为字符串开始和结束之间的点[重复]

gmxoilav 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(369)

此问题已在此处有答案：

CSS crop string in the middle（11个回答）
5天前关闭。
我想知道我将如何缩短下面看到的文本，以适应其容器。容器的宽度根据屏幕大小而变化。为了适合它的容器，第一个和最后一个单词之间的字符串应该被替换为尽可能多的点，以便它适合容器，所以类似于Sydney - ... - Quito。理想情况下，它只替换整个单词（如Doha，Singapur，...），并保留第一个单词之后/最后一个单词之前的破折号-。

.container {
    background-color: hotpink;
    width: 200px;
    white-space: nowrap
}

<div class='container'>
  <p class='route'>Sydney - Doha - Singapur - Capetown - Quito</p>
</div>

是否有CSS和/或JvaScript解决方案？

css

来源：https://stackoverflow.com/questions/76321204/how-to-shorten-string-to-dots-inbetween-beginning-and-ending-of-string

1条答案

按热度按时间

vnjpjtjt1#

function truncateText(container) {
  const text = container.innerText;
  const containerWidth = container.clientWidth;
  const words = text.split(' ');
  let truncatedText = '';

  for (let i = 0; i < words.length; i++) {
    const tempText = truncatedText + ' ' + words[i];
    container.innerText = tempText + '...';
    if (container.scrollWidth > containerWidth) {
      container.innerText = truncatedText + '...';
      break;
    }
    truncatedText = tempText;
  }
}

truncateText(document.getElementById('container'))

#container {
  width: 220px;
  white-space: nowrap;
  overflow-wrap: break-word;
}

<div id="container">
  content content content content content content content content content
</div>

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何将字符串缩短为字符串开始和结束之间的点[重复]

1条答案

相关问题

热门标签

最新问答