非CSS解决方案:容器内的文本长度重新调整字体大小
作为参考,非 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 字体,我还使用 CSS 省略号 (“…”) 来截断甚至更长文字也是css 字体,像这样:
#my_container_div {
width: 200px; /* width required for text-overflow to work */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
所以,最终:
您还可以探索使用 CSS 字母间距来使文本变窄,同时保持相同的字体大小。
正如@DMTinter 帖子的评论中提到的那样,OP 正在询问字符更改的数量(“数量”)。他还询问了 CSS,但正如@Alexander 指出的那样,“仅使用 CSS 是不可能的”。据我所知,目前这似乎是正确的,所以人们想知道次优的事情似乎也是合乎逻辑的。
我对此并不特别自豪,但它确实有效。似乎需要过多的代码来完成它。这是核心:
function fitText(el){
var text = el.text();
var fsize = parseInt(el.css('font-size'));
var measured = measureText(text, fsize);
if (measured.width > el.width()){
console.log('reducing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize );
if(m.width > el.width()){
el.css('font-size', --fsize + 'px');
}
else{
break;
}
}
}
else if (measured.width < el.width()){
console.log('increasing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize);
if(m.width < el.width()-4){ // not sure why -4 is needed (often)
el.css('font-size', ++fsize + 'px');
}
else{
break;
}
}
}
这是一个 JS Bin:,css,js,控制台,输出
请提出可能的改进建议(我对使用画布测量文本并不感兴趣……似乎开销太大(?))。
感谢@Pete 的 measureText 功能:
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
54447454
10月31日
[已回复]
能重复在发一下吗,无法下载了