页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？...

weixin_30784141

于 2018-08-03 10:11:00 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/Peng-tom/p/9412300.html

版权

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

weixin_30784141

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？...

text-align属性只能在内联元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { padding: 10px; background-co...
复制链接

扫一扫