CSS换行这事我写了无数遍，说个实话——新手最容易在这几个地方踩坑

做网站前端这些年，我写过无数遍CSS换行的代码。今天说个实话：新手做网站，最容易在换行这几个地方踩坑。

第一个坑：文字不换行。有时候你发现一个长英文单词把布局撑破了，怎么办？加word-break: break-all;就行。但别滥用，不然中文也被拆得乱七八糟。

第二个坑：强制不换行。有时候你想让导航栏的文字不换行，加white-space: nowrap;就行。但你得注意，文字太长的话会溢出，你得处理一下。

第三个坑：多行省略。有时候你想让一段文字超过2行就显示"..."，这个要用到-webkit-line-clamp。但注意，这个只在webkit内核浏览器有效，其他浏览器不支持。

这些都是小细节，但新手经常踩。我见过太多网站，因为换行没处理好，手机端布局全乱了。

常见问题

Q：CSS换行难吗？
A：不难，但细节很多。写代码的时候注意一下就行。

Q：手机端布局乱一般是什么原因？
A：80%都是换行没处理好。长单词撑破布局、文字溢出、多行不省略，这些都是。

Q：王尘宇做网站前端怎么样？
A：我在西安做网站建设，这些小细节都是基本功。客户找我做网站，从来不会出现手机端布局乱的问题。

标签： 自动换行 强制换行