我正在使用 overflow: hidden 属性来限制计算器显示中显示的数字。但是，overflow: hidden 剪辑字符中间字符，我想避免这种情况。
Mozilla 建议使用 text-overflow: '';，它与浏览器不太兼容。关于如何限制字符数和剪辑之间字符而不是中间字符，您有任何其他建议吗？ (我不想在我的显示器上看到半个数字)
鼓励使用 JavaScript 解决方案。
这是我目前的解决方案。它仅在我输入数字时有效，在我输入运算符时无效。
let digitsArray = [];
let digitsString = "";
let displayOutput = "";
let pressedButtonsArray = [];
let pressedButtonsString = "";
let visibleArray = [];
let visibleText = "";
let result = "";
let displayTextWidth;
let numberOfCharacters;
let pixelsPerCharacter;
let numberOfVisibleCharacters;
let outerDivWidth;
window.onload = function() {
outerDivWidth = document.getElementById("outerDiv").offsetWidth;
};
window.onresize = function() {
outerDivWidth = document.getElementById("outerDiv").offsetWidth;
};
document.onkeypress = function(event) {
let buttonValue = event.which || event.keyCode;
let buttonCharacter = String.fromCharCode(buttonValue);
if (/[0123456789]/.test(buttonCharacter)) {
clickNumberButton(buttonCharacter)
}
if (buttonCharacter == "+") {
clickOperationButton('+','+');
}
if (buttonCharacter == "-") {
clickOperationButton('-','-');
}
if (buttonCharacter == "*") {
clickOperationButton('*','×')
}
if (buttonCharacter == "/") {
clickOperationButton('/','÷');
};
if (buttonCharacter == "=") {
equate();
}
};
function show() {
}
function scaleFont() {
// Put in here, so that it's executed everytime a button is pressed //
console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)
displayTextWidth = document.getElementById("displayText").offsetWidth;
console.log("displayTextWidth: " + displayTextWidth);
numberOfCharacters = visibleText.length;
console.log("numberOfCharacters: " + numberOfCharacters);
pixelsPerCharacter = displayTextWidth/numberOfCharacters;
console.log("pixelsPerCharacter: " + pixelsPerCharacter);
numberOfVisibleCharacters = Math.floor(outerDivWidth / pixelsPerCharacter);
console.log("numberOfVisibleCharacters: " + numberOfVisibleCharacters);
displayText = visibleText.slice(-numberOfVisibleCharacters)
document.getElementById("displayText").innerHTML = displayText;
console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)
}
function clickNumberButton(button) {
//Equation has happened//
if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
pressedButtonsArray = [];
pressedButtonsArray.push(button);
pressedButtonsString = pressedButtonsArray.join("");
visibleArray = [];
visibleArray.push(button);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;
}
//Equation hasn't happened//
else {
pressedButtonsArray.push(button);
pressedButtonsString = pressedButtonsArray.join("");
visibleArray.push(button);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;
}
scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);
}
function clickOperationButton(button, symbol) {
if (pressedButtonsArray.length > 0 && (/[0123456789=]/.test(pressedButtonsArray[pressedButtonsArray.length-1])) || (button == "-" && pressedButtonsArray[pressedButtonsArray.length-1] !== "-")) {
if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
pressedButtonsArray = [];
pressedButtonsArray.push(result, button);
pressedButtonsString = pressedButtonsArray.join("");
visibleArray = [];
visibleArray.push(result, symbol);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;
}
else {
pressedButtonsArray.push(button);
pressedButtonsString = pressedButtonsArray.join("");
visibleArray.push(symbol);
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;
}
}
scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);
}
function equate() {
if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1]))) {
pressedButtonsArray.push("=");
result = eval(pressedButtonsString);
pressedButtonsString = result.toString();
visibleArray.push("=");
visibleText = result.toString();
document.getElementById("displayText").innerHTML = visibleText;
}
scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);
}
function del() {
if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
pressedButtonsArray = [];
pressedButtonsString = "";
visibleArray = [];
visibleText = "";
result = "";
document.getElementById("displayText").innerHTML = "";
}
else {
pressedButtonsArray.splice(-1,1);
pressedButtonsString = pressedButtonsArray.join("");
visibleArray.splice(-1,1)
visibleText = visibleArray.join("");
document.getElementById("displayText").innerHTML = visibleText;
}
scaleFont();
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);
}
function cancel() {
pressedButtonsArray = [];
pressedButtonsString = "";
visibleArray = [];
visibleText = "";
result = "";
scaleFont();
document.getElementById("displayText").innerHTML = "";
console.log("PBA: " + pressedButtonsArray);
console.log("VA: " + visibleArray);
console.log("PBS: " + pressedButtonsString);
console.log("VT: " + visibleText);
}.container {
width: 100%;
height: 100%;
margin: auto;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 16vh;
font-family: sans-serif;
}
.outerDiv {
font-size: 80px;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DABE4A;
text-align:right;
white-space: nowrap;
}
.innerDiv {
float:right;
}
.displayText {
}
.cancel {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;
display: flex;
justify-content: center;
align-items: center;
}
.del {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 2;
grid-row-end: 3;
}
.divide {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
}
.multiply {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 3;
grid-row-end: 4;
}
.minus {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 5;
}
.plus {
grid-column-start: 10;
grid-column-end: 13;
grid-row-start: 5;
grid-row-end: 7;
}
.seven {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.eight {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 4;
}
.nine {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 3;
grid-row-end: 4;
}
.four {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
}
.five {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 4;
grid-row-end: 5;
}
.six {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 4;
grid-row-end: 5;
}
.one {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}
.two {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 6;
}
.three {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 5;
grid-row-end: 6;
}
.decimal {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 6;
grid-row-end: 7;
}
.zero {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 6;
grid-row-end: 7;
}
.equal {
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 6;
grid-row-end: 7;
}
.button {
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
border: thin black solid;
}
.special {
background-color: #C6CE71;
}
.operation {
background-color: #8CD4B9;
}
.number {
background-color: #153058;
}
.module-button {
background-color: inherit;
font: inherit;
border: none;
width: 100%;
height: 100%;
}
.module-button:focus {outline:0;}
.module-button:hover {
filter:brightness(1.5);
}
.module-button:active {
filter:brightness(1);
}
@media only screen and (min-width: 768px) {
.container {
width: 752px;
max-height: 100%;
}
.wrapper {
grid-auto-rows: minmax(103px);
}
}<div class="container">
<div class="wrapper">
<div class="outerDiv" id="outerDiv">
<div class="innerDiv" id="innerDiv">
<span class="displayText" id="displayText">
</span>
</div>
</div>
<div class="cancel button special"><button class="module-button" onclick="cancel()">CANCEL</button></div>
<div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>
<div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
<div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
<div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
<div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>
<div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
<div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
<div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>
<div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
<div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
<div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>
<div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
<div class="two button number"><button class="module-button" onclick="clickNumberButton(2)">2</button></div>
<div class="three button number"><button class="module-button" onclick="clickNumberButton(3)">3</button></div>
<div class="decimal button number"><button class="module-button" onclick="clickNumberButton('.')">.</button></div>
<div class="zero button number"><button class="module-button" onclick="clickNumberButton(0)">0</button></div>
<div class="equal button number"><button class="module-button" onclick="equate()">=</button></div>
</div>
</div>最佳答案
您可以使用舍入算法和指数表示法来显示非常大的数字:
显示结果的函数:
/**
* Use the rounding algorithm to prevent overflow from float numbers.
* If the number is too big (>= 1e+8), return a string representing
* the Number object in exponential notation.
*/
function resultDisplay(number) {
number = roundNumber(number, 3);
return (number >= 1e+8) ? number.toExponential(3) : number;
}
使用的舍入算法: [1]
/**
* A rounding algorithm to handle JavaScript's rounding errors.
* @param {Number} num the number to round
* @param {Number} scale how many decimal places to keep
*/
function roundNumber(num, scale) {
var number = Math.round(num * Math.pow(10, scale)) / Math.pow(10, scale);
if(num - number > 0) {
return (number + Math.floor(
2 * Math.round(
(num - number) * Math.pow(10, (scale + 1))
) / 10
) / Math.pow(10, scale));
} else {
return number;
}
}
[1] 基于我对库宁回答的理解的算法:Round at most 2 decimal places .
关于javascript - `overflow: hidden` 的替代方案，它不剪裁中间字符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51846067/