我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法，以便它总是适合固定的div。下面是示例标记:
<div style="width: 200px;身高:1 em;溢出:隐藏;" > <p>这里的一些示例动态文本量</p> < / div >
我在想，也许这可以通过在ems中指定容器的宽度，并获得字体大小继承该值?
当前回答
这个解决方案也可能有帮助:
$(document).ready(function () {
$(window).resize(function() {
if ($(window).width() < 600) {
$('body').css('font-size', '2.8vw' );
} else if ($(window).width() >= 600 && $(window).width() < 750) {
$('body').css('font-size', '2.4vw');
}
// and so on... (according to our needs)
} else if ($(window).width() >= 1200) {
$('body').css('font-size', '1.2vw');
}
});
});
这对我很有效!
其他回答
作为参考，一个非css解决方案:
下面是一些JS，根据容器内的文本长度来调整字体大小。
代码依赖于略有修改的代码，但相同的想法如下:
function scaleFontSize(element) {
var container = document.getElementById(element);
// Reset font-size to 100% to begin
container.style.fontSize = "100%";
// Check if the text is wider than its container,
// if so then reduce font-size
if (container.scrollWidth > container.clientWidth) {
container.style.fontSize = "70%";
}
}
对于我来说，当用户在下拉菜单中进行选择时，我会调用这个函数，然后填充菜单中的div(这是动态文本出现的地方)。
scaleFontSize("my_container_div");
此外，我还使用CSS省略号(“…”)来截断甚至更长的文本，如下所示:
#my_container_div {
width: 200px; /* width required for text-overflow to work */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
所以,最终:
短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。
您还可以尝试使用CSS字母间距来使文本更窄，同时保持相同的字体大小。
试试MartijnCuppens的RFS(响应式字体大小)库，它可能会在Bootstrap中实现
这个解决方案也可能有帮助:
$(document).ready(function () {
$(window).resize(function() {
if ($(window).width() < 600) {
$('body').css('font-size', '2.8vw' );
} else if ($(window).width() >= 600 && $(window).width() < 750) {
$('body').css('font-size', '2.4vw');
}
// and so on... (according to our needs)
} else if ($(window).width() >= 1200) {
$('body').css('font-size', '1.2vw');
}
});
});
这对我很有效!
因为公认的答案并不能真正解决问题，所以我基于jkrei0的答案在React中创建了一个解决方案。这将使动态文本根据其长度增长/收缩，就像在PowerPoint中一样。
这里是代码盒的链接:https://codesandbox.io/s/relaxed-rosalind-ielb8o
如果从头开始在Bootstrap 4
访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。
