使用css缩小div中的文本字体大小

Posted 2023-03-06

【中文标题】使用css缩小div中的文本字体大小

【英文标题】：Shrink text font size within a div using css

【发布时间】：2018-02-08 00:00:10

【问题描述】：

我有一个固定宽度的 div，比如 120 像素。它里面的文本可以随着不同数量的字符而改变长度。例如，英语可以是"Compare"，俄语可以是"Добавить в сравнение"。

现在div 的宽度对于英文措辞是可以的，但是对于俄文措辞，会发生溢出。 css 有没有办法缩小字体大小以防溢出。

我知道以下 css 的用法，但我不想有省略号，并且希望显示全文，即使它变小了。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

编辑： 该问题被标记为另一个问题的重复，但事实并非如此。另一个问题是 div 是响应式的，而不是固定宽度，并且其中的文本可以增长，而我的问题是如果文本更大，如何缩小文本。

【问题讨论】：

不，单独使用 CSS 是不可能的。你可以使用一些 javascript 来“测量”文本仍然适合的大小（很确定有现有的解决方案，所以做一些研究。）

尝试使用 css 的 vw 属性

@SanchitPatiyal vw 属性不起作用，因为我有固定宽度的 div。宽度不是问题，文本内容长度是问题:)

@CBroe 很遗憾地知道 :( 这很常见，应该有一个使用 css 的解决方案，将 javascript 应用于数十个这样的 div 或按钮只是为了修复它们的文本溢出是非常低效的):

我认为正确的答案是@CBroe所说的，在css中还没有解决方案，我必须使用javascript/jquery。如果您发布答案，我很乐意接受

【参考方案1】：

如何将overflow: scroll 与white-sapce: nowrap 一起使用

<div class="content">Some text you want to display.</div>

.content 
    width: 100px;
    overflow: scroll;
    white-space:nowrap;

如果您希望用户看到整个文本，那么这是您在不使用 javascript 的情况下可以做到的最好的方法。 这看起来很难看，但可以使用更多的 css 进行管理。

【讨论】：

它显示浏览器滚动条并使其非常难看，我认为css中没有解决这个问题的方法

是的，我同意。你必须使用 js 来获得更好的结果。

【参考方案2】：

.content_div
  font-size: calc(1.1vw + 1.1vh + 1.1vmin);
  border:thin black solid;
  outline:none;
  padding:5px 2px;
  width:120px;
  overflow:hidden;
  font-size-adjust: 0.25;

<button class="content_div">
    Some Description Some Description
</button>

这和你要找的一样吗？

希望这会有所帮助。

【讨论】：

不，我的朋友，我实际上知道这个解决方案，但最大的缺点是它会切断文本。我正在寻找的是字体大小减小以适合文本。

内容多的话换行可以吗？

内容不会太长，2到4个字，不会换行，2行的按钮不好看，换个小字体的按钮，以防万一更大的内容看起来更好

【参考方案3】：

请。使用width

即，

white-space: nowrap; 
width: 16em; 
overflow: hidden;
text-overflow: ellipsis; 

【讨论】：

我不能使用灵活宽度，容器的宽度必须固定为120px，但是里面的文字可以有不同的字体大小

那你的解决方案是什么？

我还在找它:)