js结合css变量实现文字铺满容器效果

代码语言:html

所属分类:布局界面

代码描述:js结合css变量实现文字铺满容器效果

代码标签: 变量 实现 文字 铺满 容器 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@import url("https://fonts.googleapis.com/css?family=Poppins:600&display=swap");
        [data-fit-text] {
            /* Sized via the viewport, but the --width variable could be set by JS based on the element or parent's width. */
            --width: 100vw;
            /* Adjust scale depending on your exact font.  */
            --scale: .9;
            font-size: calc( var(--width) / (var(--length,1) * 0.5) * var(--scale, 1) );
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            line-height: 1;
            margin: 1rem 0;
        }

        /* ---------------------------------- */
        html {
            height: 100%;
            display: -webkit-box;
            display: flex;
        }

        body {
            margin: auto;
            text-align.........完整代码请登录后点击上方下载按钮下载查看

网友评论0