我需要显示从居中文本的左右边缘填充10px的左右边框.当所有文本都适合一行时没有问题,但是当文本占用多行时,包装内联块元素会延伸到其容器宽度的100%.
我需要一个纯CSS解决方案.
这是JSFiddle与问题的工作演示:https://jsfiddle.net/k8wrbctr/
这是HTML:
<div class="container">
<div class="borders-wrapper"><span>The title</span></div>
<div class="borders-wrapper"><span>The title that takes up multiple lines</span></div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是CSS:
.container {
width: 200px;
text-align: center;
background-color: #ddd;
}
.borders-wrapper {
display: inline-block;
border-left: 2px solid black;
border-right: 2px solid black;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
Run Code Online (Sandbox Code Playgroud)
这是结果:
| The title |
| The title that takes up |
| multiple lines |
Run Code Online (Sandbox Code Playgroud)
这就是我想要实现的目标:
| The title |
| The title that takes up |
| multiple lines …Run Code Online (Sandbox Code Playgroud) 我有一个带有requestAnimationFrame循环的干净HTML文件,完全没有处理.但是,如果我查看Chrome DevTools上的内存消耗,我会看到使用的内存不断增加,垃圾收集器每隔几秒运行一次,以收集大约1兆字节的垃圾数据.
那么这个内存泄漏来自哪里?
这就是我的内存使用情况:
这是我的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<script>
function update() {
window.requestAnimationFrame(update);
}
update();
</script>
</head>
<body>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
javascript memory performance memory-leaks requestanimationframe