css换行

强制显示一行，超出...

 .box{white-space: nowrap; /* 强制显示一行 */overflow: hidden;text-overflow: ellipsis; /* 超出... */
}

自动换行 

一般默认制动换行

.box1{word-wrap:break-word; 
}

显示2行，超出...

.box2 {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

这里要注意的是 最好不要给盒子高度，如果给高度就会变成这样

去掉高度后

文本开始空两个字

.box{text-indent: 2em;
}

首字母放大

.box::first-letter {color: red;font-size: 2em;float: left;initial-letter: 2;
}

 

文字环绕图片

给图片设置浮动

img{width: 50px;height: 50px;display: block;float: left;
}

文字环绕图片右下角

<div class="boxstyle box6"><img src="./images/t1.jpg" class="img2" alt=""><div class="content"> 圈圈圆圆圈圈，天天年年天天的我，深深的看着你的眼，深情的温柔看着你的脸，不懂怎么表现温柔的我们，想爱就像风云的善变，记得那一天，抵过永远，在这一刹那冻结了时间,不懂怎么表现温柔的我们 还以为殉情只是古老的传言 离愁能有多痛 痛有多浓 当梦被埋在江南烟雨中 心碎了才懂</div>
</div>

 .box6 {overflow: hidden;
}.content {margin-top: -40px;line-height: 20px;
}.box6::before {content: "";display: block;height: 40px;
}