# CSS SECRETS 筆記 - Ch5 文字編排
###### tags: `CSS SECRETS` `css`
[竹白記事本](https://chupainotebook.blogspot.com/)，學習紀錄，2019/03/17。

>[CSS Secrets](https://www.oreilly.com/library/view/css-secrets/9781449372736/?utm_medium=referral&utm_campaign=publisher&utm_source=oreilly&utm_content=buybox)
[CSS 秘密花園](https://www.w3cplus.com/blog/tags/502.html)

## [目錄 CSS SECRETS 筆記](https://hackmd.io/s/HyrK1S1YN)
Ch5 文字編排
1. [連字號的使用](#5-1-連字號的使用)
3. [斑馬紋文字](#5-3-斑馬紋文字)
4. [調整 tab 寬度](#5-4-調整-tab-寬度)
8. [擬真的文字效果](#5-8-擬真的文字效果)

## 5-1 連字號的使用

新屬性 [`hyphens`](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
- `hyphens: none`
- `hyphens: manual`
- `hyphens: auto`

**Codepen：**[CSS SECRETS 5-1 連字號的使用](https://codepen.io/CHUPAIWANG/pen/EMLePq)

## 5-3 斑馬紋文字
如果是表格可以很輕鬆的做到斑馬紋效果：

tr:nth-child(even) {
  background: rgba(0, 0, 0, .2);
}

如果是一行行的文字可能要透過 `background-size` 與 `line-height` 的配合：

padding: .5em;
line-height: 1.5;
background: #f1f1c7;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0, 0, 0, .2) 50%,
                                  transparent 0);

**Codepen：**[CSS SECRETS 5-3 斑馬紋文字](https://codepen.io/CHUPAIWANG/pen/RdyYgg)
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 5-3 斑馬紋文字" src="//codepen.io/CHUPAIWANG/embed/RdyYgg/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/RdyYgg/'>CSS SECRETS 5-3 斑馬紋文字</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 5-4 調整 tab 寬度

pre {
  tab-size: 4;
}

## 5-8 擬真的文字效果
>[12 Fun CSS Text Shadows](https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/)
[文字陰影產生器](https://www.we-shop.net/css3/text-shadow.html)

**Codepen：**[CSS SECRETS 5-8 擬真的文字效果](https://codepen.io/CHUPAIWANG/pen/GedPXQ)