使用 CSS 實現標題單行置中多行靠左

跟同事討論到一個需求,要在顯示文章的網頁實現「標題只有一行時置中顯示;若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 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 重複與樂透梗來自這裡

歡迎推文分享:
Published 30 November 2017 08:40 PM 由 Jeffrey
Filed under:
Views: 3,841



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication