CSS内联样式

在HTML中常见的内联元素有：

• <a></a>
• <span></span>
• <em></em>
• <i></i>
• <s></s>
• <label></label>
• <strong></strong>

下面列举有关内联元素的一些常见样式。

单词大小写

可以使用 text-transform 属性，它有以下几种值：

• capitalize 每个单词的首字母转换为大写；
• uppercase 所有字符被转换为大写；
• lowercase 所有字符被转换为小写。

多倍行距

将 line-height 的值设置成数字。下面会把 p 元素的内容设置成 1.5 被行距：

p{
    width: 200px;
    line-height: 1.5;
}

font 属性是个简写属性，它包含 line-height、font-style、font-weight、font-family、font-size、font-variant属性。例如：

p{
    /* 斜体 加粗 16px大小/行高是2 字体是 cursive */
    font: italic bold 16px/2 cursive;
}

在书写时，line-height 必须跟在 font-size 后面，由 "/" 分隔。font-family 必须最后指定。font-style、font-variant 和 font-weight 必须在 font-size 之前。

单行文字居中和对齐

HTML :

<div class="wrapper">
    <span>Hello World!</span>
</div>

CSS : 父元素设置以下就行了

.wrapper{
    width: 100%;
    height: 50px;
    text-align: center; /*文字水平居中*/
    line-height: 50px;
    /* 当行高等于容器高度时就达到了居中效果 */
}

多行文字居中和对齐

HTML：

<div class="wrapper">
    <span>Hello World!Hello World!</span>
</div>

CSS : 这时你需要计算行高，假如你想把文字占二行，那么每一行的行高就是容器高度的一半。若想把文字占三行，则行高是容器的三分之一。

.wrapper{
    height: 60px;
    width: 140px;
    text-align: center;
    line-height: 30px;    /*两行文字，每一行行高是容器高度的一半*/
}

首行缩进

使用 text-indent 属性可以实现。例如：

<p class="p1">Hello World!</p>
<p class="p2">Hello World!</p>
<style>
    text-indent: 2em;
</style>

em 单位的值是动态的，1em 等于该元素的字体大小。上面 text-indent: 2em; 就表示首行缩进两个字符。

文本左、右对齐

HTML :

<p class="p1" style="width:200px;">Hello World!</p>
<p class="p2" style="width:200px;">Hello World!</p>

CSS :

.p1{
    text-align: left;   /*默认就是向左对齐*/
}
.p2{
    text-align: right;
}

文本强制不换行

属性：white-space: nowrap

HTML :

<p class="p1">Hello World!</p>
<p class="p2">Hello World!</p>

CSS :

.p1{
    width: 60px;
    white-space: nowrap;
    border: 1px dashed #f20;
}
.p2{
    width: 60px;
    white-space: normal;   /*默认值*/
    border: 1px dashed #a34;
    /* 默认情况下，当文字超出容器宽度时会自动换行 */
}

单行文本超出省略

核心代码：

{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 三者缺一不可 */
}

HTML :

<p class="wrapper">
    Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</p>

CSS :

.wrapper{
    height: 200px;
    height: 50px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 2px dashed #f50;
    box-sizing: border-box;
}

效果：

你可以通过hover把超出的部分显示出来：

.wrapper:hover{
    overflow: visible;
}

多行文本溢出隐藏

兼容性不是太好，代码如下：

p{
    width: 200px;
    border: 1px solid red;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

其中，box-orient 属性用来设置一个元素是水平还是垂直布局其内容。它的取值如下：

• vertical 值表示盒子垂直布局其内容；
• horizontal 盒子水平布局其内容；

line-clamp 属性表示把块容器中的内容限制为指定的行数；