我需要将用户输入的文本显示到固定大小的 div 中。我想要的是自动调整字体大小，以便文本尽可能地填充框。
我可能想从最大字体大小开始，当文本太大而无法容纳容器时，缩小字体大小直到它适合并且字体必须显示为单行。是否可以仅使用 css 和 html 来执行此操作。
问问题
74713 次
9 回答
32
假设你有这个：
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
然后您可以执行以下操作：
$(document).ready(function () {
resize_to_fit();
});
function resize_to_fit(){
var fontsize = $('div#outer div').css('font-size');
$('div#outer div').css('fontSize', parseFloat(fontsize) - 1);
if($('div#outer div').height() >= $('div#outer').height()){
resize_to_fit();
}
}
工作样本
$(document).ready(function() {
resize_to_fit();
});
function resize_to_fit() {
var fontsize = $('div#outer div').css('font-size');
$('div#outer div').css('fontSize', parseFloat(fontsize) - 1);
if ($('div#outer div').height() >= $('div#outer').height()) {
resize_to_fit();
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>于 2013-08-14T12:41:24.390 回答
12
基于此处最佳答案的逻辑，我创建了一个无 jQuery 版本，
const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');
function resize_to_fit() {
let fontSize = window.getComputedStyle(output).fontSize;
output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
if(output.clientHeight >= outputContainer.clientHeight){
resize_to_fit();
}
}
function processInput() {
output.innerHTML =this.value;
output.style.fontSize = '100px'; // Default font size
resize_to_fit();
}
input.addEventListener('input', processInput);<input type="text" placeholder="Add text input here" style="margin: 10px; width:50%;">
<div id="outer" class="container"
style="width:80%; height:100px; border:2px solid red; font-size:20px;">
<div class="output" style="word-break: break-all; word-wrap: break-word;">
</div>
</div>于 2020-11-13T14:52:20.543 回答
3
获取文本字符串的像素大小是一件很难的事情，并且很大程度上取决于浏览器和用户的设置，因此可能很难想出一个适用于所有情况的解决方案。
“显示用户输入的文本”是指用户正在输入文本框吗？如果是这样，您可以附加一个按键侦听器来检查文本值的长度，然后进行相应的调整font-size。这是一个示例，尽管您可能需要更改长度和字体大小以满足您的需要：
$('#text').on('keypress', function(e) {
var that = $(this),
textLength = that.val().length
;
if(textLength > 30) {
that.css('font-size', '5px');
} else if(textLength > 20) {
that.css('font-size', '10px');
} else if(textLength > 10) {
that.css('font-size', '15px');
}
});
于 2013-08-14T12:40:55.503 回答
3
如果文本长度是指字符数，则有这篇文章指向一个简短的 jquery 片段 根据字符数动态更改字体大小
$('.text').each(function(){
var el= $(this);
var textLength = el.html().length;
if (textLength > 20) {
el.css('font-size', '0.8em');
}
});
于 2017-10-04T19:58:17.527 回答
1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
font-size: 32px;
line-height: 1.2em;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
n = 1;
while(n==1){
n = 0
if ($('#div1 .holder').outerHeight()>$('#div1').outerHeight()){
var fz = parseInt($('#div1').css('font-size'));
$('#div1').css({'font-size' : fz-1});
n = 1
} else {n = 0}
}
});
</script>
</head>
<body>
<div id="div1">
<div class="holder">I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.
I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.</div>
</div>
</body>
</html>
于 2013-08-14T12:47:49.157 回答
1
感谢 putvande 让我知道一般方法。这是一个改进的版本。
- 摆脱回调地狱。
- 修复了一些可能导致页面挂起的错误。
相同的 HTML：
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
这是功能：
resize_to_fit($('#outer'), $('#outer div'));
function resize_to_fit(outer, inner) {
while(inner.height() > outer.height()) {
var fontsize = parseInt(inner.css('font-size')) - 1;
inner.css('font-size', fontsize);
// some browsers(chrome) the min font return value is 12px
if(fontsize <= 1 || parseInt(inner.css('font-size')) >= fontsize+1)
break;
}
}
于 2015-11-03T05:44:00.827 回答
1
使用非常少的 Javascript，您可以分配具有字符串长度的 CSS 类text-length-5，例如：或text-length-20
font-size然后根据这些类名专门使用 CSS 来定位不同的目标。
它可能不适用于每种情况，但它对我的情况非常好，最大长度约为 10-12 个字符。
如果您有 100 多个或 1000 多个字符，您还可以创建一个接收长度并返回 CSS 类的函数，然后根据这些范围设置样式。
HTML：
<div class="box">ABC</div>
<div class="box">ABCDE</div>
Javascript（jQuery，但同样的想法可以应用于 React 或 vanilla JS）
$(".box").each((i, el)=> {
const length = $(el).text().length;
$(el).addClass("text-length-"+length);
})
CSS：
.box {
font-size: 16px;
}
.box.text-length-4,
.box.text-length-5,
.box.text-length-6 {
font-size: 12px;
}
于 2019-06-13T21:40:00.667 回答
0
谁想要一个取决于元素宽度的动态函数（基于 putvande 答案）：
$(document).ready(function () {
var arrEl = ['div1', 'div2', 'div3'];
resize_to_fit(arrEl);
});
function resize_to_fit(arr){
for (var el in arr) {
var jEl = $('.' + arr[el] + ' span');
var fontsize = jEl.css('font-size');
jEl.css('fontSize', parseFloat(fontsize) - 1);
if (jEl.width() >= $('.' + arr[el]).width()){
resize_to_fit([arr[el]]);
}
}
}
和 HTML：
<div class="div1">
<span>Lorem Ipsum</span>
</div>
<br/>
<div class="div2">
<span>Lorem Ipsum 2</span>
</div>
<br />
<div class="div3">
<span>Lorem Ipsum 3</span>
</div>
使用 CSS：
.div1, .div2, .div3 {
width: 207px;
white-space: nowrap;
}
请注意，您只将 font-size 设置为跨越内部，而不是外部 div。
于 2014-09-14T19:22:56.337 回答
0
你可以试试这个，它对我来说是 100% 的。
function resize(){
const isOverflown = ({ clientWidth, scrollWidth, clientHeight, scrollHeight}) => scrollWidth > clientWidth || scrollHeight > clientHeight
const resizeText = ({ element, elements, minSize = 10, maxSize = 512, step = 1, unit = 'px' }) => {
(elements || [element]).forEach(el => {
let i = minSize
let overflow = false
const parent = el.parentNode
while (!overflow && i < maxSize) {
el.style.fontSize = `${i}${unit}`
overflow = isOverflown(parent)
el.style.lineHeight = ((el.style.fontSize).slice(0, -2))*1.2+"px"
if (!overflow) i += step
}
el.style.fontSize = (`${i - step - 1}${unit}`)
})
}
resizeText({
elements: document.querySelectorAll('.text'),
step: 0.5
})
}
if (document.readyState === 'complete') {
resize();
} else {
window.onload = resize();
}<div id="outer" style="width:200px; height:80px; border:1px solid red;">
<div class="text">Lorem ipsum</div>
</div>
<div id="outer" style="width:200px; height:80px; border:1px solid red;">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer mollis dui felis, vel vehicula tortor cursus nec.</div>
</div>于 2021-06-18T04:22:17.337 回答