css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <article lang="zh">
  <p>(吉隆坡<span class="u-upright">29</span>日讯)国手陈慧晶昨晚在第一届大马全国篮球联赛(MNBL)女子决赛中爆发,全场轰进<span class="u-upright">18</span>分<span class="u-upright">4</span>篮板,带领昔加末篮球公会以<span class="u-upright">60</span>比<span class="u-upright">51</span>击败吉隆坡高峰集团,以大热姿态在第一座MNBL奖杯上留名。</p>

  <h2>陈慧晶夺生涯首个<span class="u-upright">MVP</span></h2>

  <p>陈慧晶在初赛与半决赛并不是特别抢眼,岂知来到决赛却成为了球队的致胜功臣。身高<span class="u-upright">177</span>公分的陈慧晶此役<span class="u-upright">14</span>投<span class="u-upright">8</span>中,命中率高达<span class="u-upright">57%</span>,尤其最后一节更是独得<span class="u-upright">8</span>分,顶住了高峰队的反扑。凭藉决赛的精彩演出,陈慧晶也因此当选决赛<span class="u-upright">MVP</span>(最有价值球员),生涯首次获得这一项荣誉。</p>

  <p>对于陈慧晶的表现,昔加末主帅戴正钧也赞不绝口,他说:「陈慧晶在这一场比赛的发挥是大家有目共睹的。而除了我们的<span class="u-upright">MVP</span>(陈慧晶),汪秀婷、邱嫊媚也在关键时刻投进了几个三分球,我们才能够在紧要关头将比分扩大。」</p>


  <p>昔加末靠三分球抛离对手的纠缠,本场比赛就出现了好多次,像第三节高峰队追至<span class="u-upright">20</span>比<span class="u-upright">26</span>时,邱嫊媚就轰进三分球;然后在<span class="u-upright">22</span>比<span class="u-upright">31</span>时,汪秀婷也射出一记三分弹;来到比赛最后<span class="u-upright">5</span>分钟高峰以<span class="u-upright">45</span>比

  <p>除了陈慧晶,邱嫊媚与彭燕燕在此役也各射下<span class="u-upright">8</span>分,汪秀婷和钟佩金各得<span class="u-upright">7</span>分,彭慧萍虽然只得<span class="u-upright">5</span>分,但却抢下全场最高的<span class="u-upright">10</span>个篮板。</p>

  <p>高峰队的陈巧婷此役的发挥也极为出色,射下<span class="u-upright">23</span>分<span class="u-upright">8</span>篮板,但却无法带领球队取胜。此外叶佛仪取得<span class="u-upright">10</span>分<span class="u-upright">5</span>篮板、李秀雯<span class="u-upright">8</span>分<span class="u-upright">6</span>篮板、伊查蒂
      class="u-upright">7</span>分<span class="u-upright">6</span>篮板等。</p>

  <h2>雷升龙:发挥输对手<span class="u-upright">5%</span></h2>


  <p>雷升龙说:「我们和昔加末其实都属于同样水平的队伍,胜负关键就要看双方球员的临场表现,而在这一方面我们在决赛中输了<span class="u-upright">5%</span>。」</p>


              body {
  writing-mode: vertical-rl;
  font-size: 1.2em;
  line-height: 1.7;

article {
  height: 25em;
  text-align: justify;
  margin-top: auto;
  margin-bottom: auto;

h1 {
  font-size: 141%;
  font-weight: 700;

h2 {
  font-size: 115%;
  font-weight: 700;

p {
  margin-left: 0.75em;


.u-upright {
  text-combine-upright: all;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................