CSSの知識まとめ(6)

一般的な CSS スタイル

4. 段落スタイル

1) 行の高さ

段落内の各行の高さを制御します

line-height : 通常の長さ

ソースコード例:

リーリー

リーリー

効果:

これは通常の行の高さです
これは通常の行の高さです
これは通常の行の高さです

これは行の高さ 30px です
これは行の高さ 30px です
これは行の高さ 30px です

要素内にテキスト行があり、行の高さが要素の高さと等しい場合、テキスト行は垂直方向の中央に配置されます。

*これはテキスト行であり、ブラウザの元の内側と外側の余白を最初に削除する必要があることに注意してください。

ソースコード例:

リーリー

リーリー

効果:

2)段落のインデント

段落の最初の行のインデントを制御します

text-indent : length

ソースコード例:

リーリー

リーリー

効果:

ここには最初の行のインデントはありません

ここの最初の行は 2em だけインデントされています

3)段落の配置

段落の配置を制御します。テキストだけでなく、オブジェクト内の他のインラインまたはインラインブロック要素も text-align で配置できます。

text-align : 左揃え

|

ソースコード例:

リーリー

リーリー

効果:

左揃えテキスト

テキストを中央揃えにする

右揃えのテキスト

4)文字間隔

段落内のテキスト間の距離を制御します

文字間隔 : 通常の長さ

ソースコード例:

リーリー

リーリー

効果:

これはデフォルトのテキスト間隔です

これは 10 ピクセルのテキスト間隔です

 

　　5）文字溢出

　　　　控制文本内容溢出部分的样式

　　　　text-overflow : clip | ellipsis

　　　　clip : 当内联内容溢出块容器时，将溢出部分裁切掉。

　　　　ellipsis : 当内联内容溢出块容器时，将溢出部分替换为（...）。

　　　　因为text-overflow只是用来说明文字溢出时用什么方式显示，所以还需要定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），这样才能实现溢出文本被裁切或是显示省略号的效果。

 　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clip,.ellipsis</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;
}<span style="color: #800000;">
.clip</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">clip</span>;
}<span style="color: #800000;">
.ellipsis</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;
}<span style="color: #800000;">
.clip:hover,.ellipsis:hover</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">visible</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当你把光标移动到一下文本上，就能看到全部文本。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clip"</span><span style="color: #0000ff;">></span>这里使用的是"text-overflow:clip"<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ellipsis"</span><span style="color: #0000ff;">></span>这里使用的是"text-overflow:ellipsis"<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

 　　效果：

当你把光标移动到一下文本上，就能看到全部文本。

这里使用的是"text-overflow:clip"

这里使用的是"text-overflow:ellipsis"

 

　　6）段落换行

　　　　控制内容超过容器的边界时是否换行 （一般用于英文和URL地址）

　　　　word-wrap : normal | break-word

　　　　normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理

　　　　break-word : 内容将在边界内换行。如果需要，单词内部允许换行。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
    .break</span>{<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
        word-wrap</span>:<span style="color: #0000ff;">break-word</span>;
    }

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="break"</span><span style="color: #0000ff;">></span>我的博客：http://www.cnblogs.com/mossbaoo/<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：（URL地址会另外换行）

我的博客：http://www.cnblogs.com/mossbaoo/