跟同事討論到一個需求,要在顯示文章的網頁實現「標題只有一行時置中顯示;若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 JavaScript 依文字長度動態調整 text-align 樣式,但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量,難以依據字數直接推算,於是我開始揣摩由文字元素高度偵測行數的雞鳴狗盜招術...

爬文後才發現我把事情想得太複雜了,這個需求用 CSS 就能搞定,一行程式都不用寫。做法是用 <div> 包住 display: inline-block 的 <span>,將 <div> 設成 text-align: center,<span> 設成 text-align: left。

<style>
.box {
  border: 1px solid gray;
  margin: 12px;
  padding: 6px;
  width: 420px;
}
.flex-align-title {
  text-align: center;
  width: 100%;
}
.flex-align-title span {
  text-align: left;
  display: inline-block;
}
</style>
<div class="box">
    <div class="flex-align-title">
      <span>網路盛傳連中樂透頭彩 黑大:子虛烏有</span>
    </div>
</div>
<div class="box">
    <div class="flex-align-title">
      <span>資訊史重大里程碑 某部落客成功實現GUID碰撞實驗 專家:機率比被隕石爆頭還低</span>
    </div>
</div>

搞定收工,就這麼簡單!

想動手實測的同學可試玩 CodePen Live Demo

註: GUID 重複與樂透梗來自這裡


Comments

Be the first to post a comment

Post a comment