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

问题描述：

我有一个固定的宽度div，比如120px。其中的文字可以根据不同的字符数改变长度。例如，英语语言可以是"Compare"，俄语可以是"Добавить в сравнение"。使用css缩小div内的文本字体大小

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

我知道下面的CSS的用法，但我不想有省略号，并且即使它变得更小也想显示全文。

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

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

不，这不可能单独使用CSS。您可以使用一些JavaScript来“衡量”文本的大小仍然适合（相当肯定现有的解决方案，因此做一些研究）。 – CBroe

尝试使用css的vw属性 –

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

答

请注意。使用width

即

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

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

那么你的解决方案是什么？ – user8256287

我仍在寻找它:) –

答

.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行的按钮看起来不太好，而是在更大内容的情况下更小字体的按钮看起来更好 –

答

有关使用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来获得更好的结果。 – Ragas

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

相关推荐