整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS之文本對(duì)齊。
免費(fèi)少兒編程開課了，同學(xué)們好！今天分享的知識(shí)是設(shè)置文本在區(qū)域中水平方向的對(duì)齊方式。用到的是 css 的 text 的align屬性，這個(gè)屬性的常用值有類似，左對(duì)齊，right 右對(duì)齊，center 居中對(duì)齊。
Justify兩端對(duì)齊需要注意的是 text line和德瑞權(quán)文本方向有關(guān)系。如果德瑞權(quán)屬性是 l tr則默認(rèn)值為列；如果德瑞權(quán)屬性是 rtl則默認(rèn)值為 right。左中右對(duì)齊都很簡(jiǎn)單，一目了然。
但我們會(huì)注意到兩端對(duì)齊這一行并沒有達(dá)成我們想要的效果，所謂的兩端對(duì)齊就是文本的第一個(gè)字對(duì)齊區(qū)域的左邊界，文本的最后一個(gè)字對(duì)齊右邊界，中間的文本平均分布在區(qū)域內(nèi)?？纯创a，確實(shí)設(shè)置了 text line 為這四個(gè)方案。
沒有效果的原因是這個(gè)屬性對(duì)最后一行不生效，解決方案是使用 text line last屬性，先看看效果，ok，這就是兩端對(duì)齊?，F(xiàn)階段學(xué)習(xí)到這里就可以了，但我需要提醒各位同學(xué)，text line last的兼容性是有問題的，特別是在蘋果的 ios 系統(tǒng)中spare 不支持這個(gè)屬性，這會(huì)導(dǎo)致安卓手機(jī)中顯示正常，但蘋果手機(jī)卻顯示錯(cuò)誤。
為了解決這個(gè)問題，只需要讓文本不是最后一行即可?？催@段代碼，v到了前面講過的偽元素 after，在這里在文本后插入了一個(gè)內(nèi)容，寬度是百分之一百，顯示方式是內(nèi)塊，超出部分隱藏并設(shè)置了高為零。
我用 after用來創(chuàng)建一個(gè)偽元素添加一行內(nèi)容并且將其隱藏。這樣要顯示的內(nèi)容就不是最后一行了，這次閥就會(huì)生效再次回到瀏覽器刷新成功。
好了，今天的分享就到這里，所有的案例及相關(guān)文檔均可向我獲取，我們下期見。
想學(xué)編程，點(diǎn)點(diǎn)關(guān)注。
天我們來聊一聊CSS文本兩端對(duì)齊。
事情的起因是這樣的，在Review一位同事做的頁面時(shí)，發(fā)現(xiàn)好幾處字符之間寫了很多空格，于是問他為什么這么做，他說設(shè)計(jì)要求這幾個(gè)文本的呈現(xiàn)寬度必須一致，但它們的字符個(gè)數(shù)又不同，所以就在字符數(shù)少的文本中添加空格從而達(dá)到文本兩端對(duì)齊（字符均勻分布）的效果，于是我對(duì)他表示了侮辱性的贊美。
用添加空格符的方式實(shí)現(xiàn)文本兩端對(duì)齊，除了不夠優(yōu)雅，容易被羞辱之外，還有其他三個(gè)問題：
1. 不同的瀏覽器，不同的移動(dòng)設(shè)備，對(duì)空格符的展示寬度是有細(xì)微差別的，一個(gè)空格看不出影響，但是多個(gè)空格就無法保證一致了，很有可能出現(xiàn)沒對(duì)齊或者折行的情況。
2. 任何頁面都避免不了修改，如果文本需要更換，并且更換后字?jǐn)?shù)發(fā)生變化，這將意味著之前的空格數(shù)量需要重新調(diào)整，非常不利于維護(hù)。
3. 某些頁面上的文本，用戶可能會(huì)去復(fù)制，但復(fù)制下來后發(fā)現(xiàn)含有很多空格符，仍需要二次編輯。
因此在日常開發(fā)中要避免使用空格符來實(shí)現(xiàn)兩端對(duì)齊，而應(yīng)該使用標(biāo)準(zhǔn)的CSS文本對(duì)齊屬性來解決。
這個(gè)屬性大家經(jīng)常用到的值有三個(gè)：
left：左對(duì)齊
right：右對(duì)齊
center：居中對(duì)齊
它還有一個(gè)屬性值：justify，表示文本兩端對(duì)齊，也就是讓文本在固定寬度內(nèi)平均分布，使兩邊不會(huì)出現(xiàn)空白。那么用這個(gè)屬性是否就能很好的實(shí)現(xiàn)文本兩端對(duì)齊呢？
通過測(cè)試發(fā)現(xiàn)，單行文本通過text-align:justify; 并不能實(shí)現(xiàn)兩端對(duì)齊，為什么會(huì)出現(xiàn)這個(gè)情況？我們需要先了解一點(diǎn)點(diǎn)排版知識(shí)。
傳統(tǒng)書刊的排版印刷對(duì)于整個(gè)自然段通常采用兩端對(duì)齊的方式，這樣就保證了排版的美觀和良好的閱讀體驗(yàn)。但是自然段的最后一行文字是左對(duì)齊的，因?yàn)樽詈笠恍形谋疽馕吨温涞慕Y(jié)束，沒有必要繼續(xù)兩端對(duì)齊了。
細(xì)心的朋友應(yīng)該已經(jīng)猜到了，在我們測(cè)試中，文本只有一行，意味著它也是最后一行，而CSS的文本對(duì)齊方式也遵循最后一行文本默認(rèn)左對(duì)齊的原則，因此不能實(shí)現(xiàn)兩端對(duì)齊。
好在CSS為我們提供了另外一個(gè)屬性：text-align-last，這個(gè)屬性用來額外設(shè)置段落最后一行文本的對(duì)齊方式，因此對(duì)于單行文本，我們只需要設(shè)置：text-align-last: justify;就可以了，親測(cè)有效。
TIPS：單行文本要想實(shí)現(xiàn)文本兩端對(duì)齊，除了上面說的方式，一定別忘了這個(gè)文本需要一個(gè)確定的寬度，不設(shè)置寬度，文本也就不存在兩端。因此這個(gè)單行文本不能是行內(nèi)布局，而應(yīng)該是塊級(jí)或者是行內(nèi)塊級(jí)布局。
好景不長(zhǎng)，用上面的方式實(shí)現(xiàn)了文本兩端對(duì)齊后，發(fā)現(xiàn)它只是在PC上有效，但是在IOS的系統(tǒng)瀏覽器里毫無效果，最后發(fā)現(xiàn)在IOS上不支持text-align-last這個(gè)屬性，因此這個(gè)方式并不穩(wěn)妥。
那么如何解決IOS的兼容問題呢？
著手點(diǎn)只有一個(gè)，那就是如何保證單行文本對(duì)于CSS來說并不是最后一行？這句話看似很奇怪，其實(shí)解決辦法很簡(jiǎn)單，只需要給這個(gè)單行文本添加一個(gè)偽元素after即可。
someClass: after { content: “”}
由于添加了偽元素，單行文本不再是最后一行，偽元素才是， 同時(shí)偽元素的內(nèi)容為空字符串，并不會(huì)對(duì)顯示造成影響，因此完美解決了這個(gè)問題。
注意：偽元素after不僅要設(shè)置content，還要添加 width:100%; 和 display:inline-block; 這是因?yàn)椋喝绻辉O(shè)置寬度，偽元素內(nèi)容并不會(huì)成為第二行，如果display設(shè)置成block，又造成了偽元素變成了另一個(gè)塊級(jí)元素，所以要設(shè)置為inline-block。
最終的代碼：
someClass {text-align:justify; width:300px;}
someClass: after { content: “”; width:100%; display:inline-block;}
例
一個(gè)簡(jiǎn)單的 HTML 表格，帶有兩個(gè)單元格：
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
瀏覽器支持
所有主流瀏覽器都支持 <td> 標(biāo)簽。
標(biāo)簽定義及使用說明
<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。
HTML 表格有兩種單元格類型：
表頭單元格 - 包含頭部信息（由 <th> 元素創(chuàng)建）
標(biāo)準(zhǔn)單元格 - 包含數(shù)據(jù)（由 <td> 元素創(chuàng)建）
<th> 元素中的文本通常呈現(xiàn)為粗體并且居中。
<td> 元素中的文本通常是普通的左對(duì)齊文本。
提示和注釋
提示：如果需要將內(nèi)容橫跨多個(gè)行或列，請(qǐng)使用 colspan 和 rowspan 屬性！
HTML 4.01 與 HTML5之間的差異
HTML 5 中不再支持 HTML 4.01 中的某些屬性。
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| abbr | text | HTML5 不支持。規(guī)定單元格中內(nèi)容的縮寫版本。 |
| align | leftrightcenterjustifychar | HTML5 不支持。規(guī)定單元格內(nèi)容的水平對(duì)齊方式。 |
| axis | category_name | HTML5 不支持。對(duì)單元格進(jìn)行分類。 |
| bgcolor | rgb(x,x,x)#xxxxxxcolorname | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定單元格的背景顏色。 |
| char | character | HTML5 不支持。規(guī)定根據(jù)哪個(gè)字符來進(jìn)行內(nèi)容的對(duì)齊。 |
| charoff | number | HTML5 不支持。規(guī)定對(duì)齊字符的偏移量。 |
| colspan | number | 規(guī)定單元格可橫跨的列數(shù)。 |
| headers | header_id | 規(guī)定與單元格相關(guān)聯(lián)的一個(gè)或多個(gè)表頭單元格。 |
| height | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 設(shè)置單元格的高度。 |
| nowrap | nowrap | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定單元格中的內(nèi)容是否折行。 |
| rowspan | number | 設(shè)置單元格可橫跨的行數(shù)。 |
| scope | colcolgrouprowrowgroup | HTML5 不支持。定義將表頭單元格與數(shù)據(jù)單元格相關(guān)聯(lián)的方法。 |
| valign | topmiddlebottombaseline | HTML5 不支持。規(guī)定單元格內(nèi)容的垂直排列方式。 |
| width | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定單元格的寬度。 |
全局屬性
<td> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<td> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
