SOURCE

console 命令行工具 X clear

                    
>
console
<style>
    body{ font-size: 16px; background-color: #fff7d9; font-family:minijianxixingkai55387;}
    .line{
        border:2px solid #666;
        border-top: 0;
        width: calc(24*17px + 4px);
        padding-right: -1px;
    }
    .word{
        border:2px solid #666;
        border-left: 0;
        width: 24px;
        height: 24px;
        display: inline-block;
        text-align: center;
        margin-bottom: 5px;
        font-size: 22px;
        font-weight:bold;
        color:#06f;
    }
    .word:nth-child(17n){
        border-right: 0;
    }
    *{
        box-sizing: border-box;
    }    
  
</style>


<div class="line">
</div>
<script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript">
   $youziku.load("body", "79fdb4787597460bb7c7f39ff03c4a20", "HaTian-SuiXing");
   $youziku.draw();
</script>
<script>
    let content = parent.location.hash || '\t\t从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。\n\t\tQuasar Framework 可以通过其一流的构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用,让你的想法的设计和构建变得轻而易举。你可以在服务端挑选执行超过上百款遵循“Material Design 2.0”的组件,并在浏览器端可用。你甚至可以管理网站的 <meta> 标签。Quasar 是一个基于 Node.js 和 webpack 的开发环境,它可以通过一套代码完成 SPA、PWA、SSR、Electron 和 Cordova 应用的快速开发。'
    document.querySelector('.line').innerHTML =
    Array.from(
        content
            .replace(/ /g, ' ')
            .replace(/\t/g, ' ')

    ).map( function(word){
        return '<span class="word">' + word + '</span>'
    }).join('').replace(/\n/g, '<br/>')
</script>