小编Gie*_*usT的帖子

如何强制内联块元素正确包装它的多行子元素?

我需要显示从居中文本的左右边缘填充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)

html css

8
推荐指数
1
解决办法
5897
查看次数

空requestAnimationFrame循环泄漏内存?

我有一个带有requestAnimationFrame循环的干净HTML文件,完全没有处理.但是,如果我查看Chrome DevTools上的内存消耗,我会看到使用的内存不断增加,垃圾收集器每隔几秒运行一次,以收集大约1兆字节的垃圾数据.

那么这个内存泄漏来自哪里?

这就是我的内存使用情况:

Chrome DevTools内存使用数据

这是我的代码:

<!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

7
推荐指数
1
解决办法
1093
查看次数