文字排版

发表于 | 更新于 | 分类于

单行居中，多行居左

单行居中，多行居左

1
2
3
<div>
    <p>乌托邦（Utopia）一词出自于柏拉图的《理想国》。</p>
</div>

方法一

1
2
3
4
5
6
7
8
/*css*/
div {
    width: 100%;
    background: #f0f0f0;
    text-align: center;}
p {
    display: inline-block;
    text-align: left;}

对父元素使用text-align:center,子元素使用text-align:left 并且将子元素设置为行内块元素display:inline-block ,因为行内块元素可以继承父元素的text-align属性，所以可以实现单行居中，多行居左的效果

方法2

1
2
3
4
5
6
7
8
/*css*/
div {
    width: 100%;
    background: #f0f0f0;
    display: flex;
    justify-content: center;}
p {
    text-align: left;}

父元素使用弹性盒子布局，子元素使用text-align:left

多行省略

overflow 属性规定当内容溢出元素时的处理。

1
2
overflow: value;
`

  • auto：浏览器自行处理溢出内容。
  • hidden：隐藏多余部分 。
  • scroll：浏览器添加滚动条。
  • visible：显示全部内容（默认值）。
1
<div>...</div>
1
2
3
4
div {
    width: 100%;
    height: 150px;
    background: #f0f0f0;}
1
2
3
4
5
div {
    width: 100%;
    height: 150px;
    background: #f0f0f0;
	overflow: hidden;}
1
2
3
4
5
div {
    width: 100%;
    height: 150px;
    background: #f0f0f0;
	overflow: scroll;}

text-overflow 属性规定当文本溢出元素时的处理。

1
text-overflow: clip|ellipsis|string;

  • clip：截断文本。
  • ellipsis：显示省略号来代替显示不全的文本。
  • string：显示指定字符串来代替显示不全的文本。


1
<div>乌托邦（Utopia）一词出自于柏拉图的《理想国》。</div>

1
2
3
4
5
6
div {
    width: 100%;
    background: #f0f0f0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}

竖行

单行

1
<div>蝶恋花</div>
1
2
3
4
5
6
/*css*/
div {
    width: 20px;
    font-size: 20px;
    background: #f0f0f0;
    word-wrap: break-word;}

强制定义容器的宽度，文字便会竖行排布

多行

1
<div>最是人间留不住，朱颜辞镜花辞树。</div>
1
2
3
4
5
6
7
8
/*css*/
div {
    height: 170px;
    font-size: 20px;
    word-wrap: break-word;
    background: #f0f0f0;
    writing-mode: vertical-rl;
    writing-mode: tb-rl;}  /*IE*/

css3：
writing-mode:vertical-rl;：垂直方向，从右向左
writing-mode:vertical-lr;：垂直方向，从左向右
IE私有属性：
writing-mode:tb-rl;：垂直方向，从右向左
writing-mode:tb-lr;：垂直方向，从左向右
不需要-ms-前缀