页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然 后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？...
text-align屬性只能在內聯元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
padding: 10px;
background-color: #cd0000;
text-align: center;
width: 500px
}
.content {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="box">
<p id="conMore" class="content">文字內容</p>
</div>
<!-- 按鈕 -->
<p><button id="btnMore">更多文字</button></p>
<script>
var btn = document.getElementById('btnMore'),
content = document.getElementById('conMore');
if (btn && content) {
btn.onclick = function() {
content.innerHTML += '-新增文字';
};
}
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/Peng-tom/p/9412300.html
總結
以上是生活随笔為你收集整理的页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然 后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： day7——集合，深浅copy
- 下一篇： redis为什么选择单线程工作模型