#CSS:讓瀏覽器自動進行字詞分行

上篇我在HTML的部分利用<wbr />進行手動式的字詞分行,有的時候確實令人覺得麻煩,是否可以讓瀏覽器在察覺會超出容器時自動進行分行呢?有的!必須利用CSS,而且還有兩種不同的做法,底下我就來講解這兩種做法該如何使用並且這之間有什麼差別。

遇到長單字或是長網址…

就如同我在上篇所說在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?......等等之類的分隔符,會在分隔符處分行),而最常遇到這種狀況的地方就是在張貼網址的時候,如下圖:
Wrap1

可以看見的是,網址的部分已經超出容器了,並且會注意到文字中間有奇怪的斷行現象,例如:上圖的點部落的部和落之間以及Rosetta Code兩個字之間。這個換行導致了後方多出了一塊空白,而之所以出現這樣的換行是因為瀏覽器發現後面一串文字無法放入後方的空間中,故在可斷行的地方換行希望能夠解決,結果還是沒辦法,就讓它超出去了。

利用word-wrap: break-word

我們可以在該容器加上word-wrap: break-word這段CSS來解決分行的問題。程式碼如下方:

*{
     word-wrap: break-word;
}

結果如下圖:
wrap2

可以發現文字終於被放在容器中了,並且也真的做到了自動分行的效果,只是不像wbr可以控制其分行的位置而已。如果各位再仔細看一下的話,就會發現後方依然還留有空白處,也就是上圖的點部落的部和落之間以及Rosetta Code兩個字之間的換行依然還在,究竟可不可以把它們去除掉呢?

利用word-break: break-all

除了上述的方法外,我們也可以在該容器加上word-break: break-all這段CSS來解決分行的問題。程式碼如下方:

*{
     word-break: break-all;
}

結果如下圖:
Wrap3

跟上個方法一樣的,我們也可以把文字放在容器中了,並且也真的做到了自動分行的效果,而且原本後方會殘留的空白不見了,原因是這個方法是很暴力地在無法放下文字的地方直接換行,而這樣做的缺點就在圖中可以看到原本Stack Overflow的Overflow是一個字,但卻被直接從中間硬生生地給切斷了,不像上個方法還會先嘗試看看換行後該單字是否能夠放的下。

結論

上面兩個方法有好有壞,各位可以依據自己的看法來決定要用哪個方法。如果是英文文章要做這類的分行行為,用word-wrap: break-word會較妥當,不會一直導致一堆字詞被從中切開;而如果是放置很多長網址的話,那就用word-break: break-all會比較好,因為網址從中間切開也沒什麼關係,反倒是為了讓網址能放下去而進行的換行所殘留下來的空白比較討厭。在這裡就給大家這樣的建議,希望各位都能夠了解!

參考資料

  1. Word wrapping/hyphenation using CSS. — Kenneth Auchenberg:http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
  2. 你真的了解word-wrap和word-break的区别吗? – 无双 – 博客园:http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

#CSS:製作動畫效果-使用keyframe與animation

之前在網站上搞了一個Logo用的CSS3動畫,然後現在這個部落格的標題也用了CSS3動畫,故現在想來好好地整理一下跟CSS3動畫相關的功能,底下就開始說明該如何建立CSS3動畫。

使用@keyframes建立動畫內容

首先先在CSS檔內建立@keyframes去制定動畫的內容,其Syntax在下方:

@keyframes 動畫名稱 {
  關鍵影格選擇器1 { 眾多css樣式; }
  關鍵影格選擇器2 { 眾多css樣式; }
  ...
}

概念類似Flash當中的關鍵影格,在動畫內建立各個位置的時候,其css樣式為何,到最後就交由瀏覽器去做補間效果。

關鍵影格選擇器的部分可使用:
1. 0-100% : 在時間的幾%時為何種css樣式。
2. from、to : 其實意思與0%和100%一樣。
上列兩種選擇器範例如下:

@keyframes myAnimation
{
  0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

“`css
@keyframes myAnimationFromTo
{
from { margin-top: 20px; color: yellow; }
to { margin-top: 80px; color: blue; }
}

建立好@keyframes動畫內容後,接著就要在欲放置該動畫的CSS樣式表內加入animation屬性。

# Animation屬性
Animation屬性的Syntax於下:
```css
  animation: name duration timing-function delay iteration-count direction;

或者依照上面每一項的名稱皆可分開寫:

animation-name: 動畫名稱;
animation-duration: 動畫作用時間;
animation-timing-function: 動畫補間時運用的計算公式;
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數;
animation-direction: 動畫作用的方向;

animation-name指的就是上面定義的@keyframes的名稱,找到你想用的@keyframes的名稱,填上去即可。

接著可以從animation-duration去指定其動畫時間,這也是為什麼上面定義@keyframes不是使用時間,而是使用%,這可以讓同一個動畫重複使用,並且不一定要執行相同的時間。

timing-function有linear、ease、ease-in、ease-out、ease-in-out可以用,或者可用cubic-bezier(n,n,n,n)來自己制定(0 <= n <= 1)。

至於iteration-count如果要無限多次可用infinite。

最後動畫作用的方向指的是動作作用的時候可以是@keyframes相反的方向(to->from、100%->0%)(reverse),或是作用完後又回頭(alternate)、或是先相反再變正常順序(alternate-reverse)。

底下用個範例去使用上面定義的myAnimation動畫:

div{
  width: 100px;
  height: 100px;
  animation: myAnimation 3s ease 0s infinite alternate;
}

CSSAnimationExample.gif

大體上製作一個CSS Animation就是這樣的一個流程,你也可以搭配CSS3的transform屬性去作出更多移動、翻轉、放大縮小的效果,甚至是3D翻轉喔!!

如果不想自己coding出動畫,想藉助一些工具來做動畫,可以參考使用CSS 3.0 Maker唷!

-webkit-前綴字

由於目前通用性的寫法在Chrome上還是不能用,請在CSS多複製一份@keyframes動畫與animation屬性,並在前面加上-webkit-前綴字,如下列範例所示:

@keyframes myAnimation
{
  0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

@-webkit-keyframes myAnimation
{
  0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

div{
  width: 100px;
  height: 100px;
  animation: myAnimation 3s ease 0s infinite alternate;
  -webkit-animation: myAnimation 3s ease 0s infinite alternate;
}

參考資料

  1. w3schools.com > CSS3 @keyframes Rule:http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
  2. w3schools.com > CSS3 animation Property:http://www.w3schools.com/cssref/css3_pr_animation.asp
  3. 池水間 – 你需要知道的CSS3動畫技術 ::: 睡蓮‧池水間 – waterlily-lsl.com:http://waterlily-lsl.com/modules/article/view.article.php/c2/232/p2
  4. CSS 3.0 Maker:http://css3maker.com/