javascript - 如何修复段落中的文本长度?
问题描述
我正在尝试使用 JS 创建一个简单的计算器。我使用段落标签作为显示,问题是文本可以超出线。
我的计算器:
但是当我输入超过 12 个按钮时,会发生这种情况:
我添加数字的方式如下:
$('#5').click(function() {
$("#mainline").text(function(i, oldtext) {
return oldtext.replace(/^0$/, '') + '5';
});
});
我试图将所有按钮放在一个循环中,以检查段落标签的长度,如果它超过 12 则:
document.getElementsByTagName("button").disabled = true
但我没有工作。我应该怎么办?
HTML:
<div class='calculator'>
<div class='lines'><p id="mainline">0</p></div>
<div id="row1">
<button id='AC'>AC</button>
<button id='pm'><sup>+</sup>/<sub>-</sub></button>
<button>%</button>
<button id='dvd'>/</button>
</div>
CSS:
.calculator {
display: inline-block;
position: relative;
padding-left: 37%;
padding-top: 7%;
}
button {
width: 50px;
height: 40px;
margin-bottom: 1px;
}
#mainline {
border: 3px solid #FF9500;
text-align: right;
}
解决方案
正如我在评论中看到的那样,你有几件事要考虑。
但这里有一个可能感兴趣的建议:CSSdirection:rtl
和text-overflow:ellipsis
...
$("#test").on("keyup",function(){
$("#display").text($(this).val());
});
#display{
/* Just for this demo */
height:1em;
width:8em;
border: 1px solid orange;
display:inline-block;
margin-top:0.4em;
/* suggestion */
direction: rtl;
overflow:hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type in! <input id="test"><br>
Result: <div id="display"></div>
推荐阅读
- c++ - 有没有办法替换使用它们的所有函数定义并自动更改我的源代码中的变量名称?
- php - 为什么我在导入 XML 时会出现重复项?
- python - 字典列表列表正在更新顶级条目
- javascript - 基本 React 组件渲染两次,没有任何 API 数据
- ios - 在 Xcode 中出现我不理解的错误
- ios - iOS“开发人员”角色可以创建/上传 Testflight 版本吗?
- html - 如何阻止文本在 HTML 输入框中居中?
- c# - 如何以列表形式将 Linq 添加到 EF 数据到 Class Object C#?
- python - auzre databricks 安装应用程序,但无法从 databricks 笔记本输入命令
- python - 排序顺序搜索