作为宅女加程序员，我深刻地体会到了公司-家一条线的生活状态，直至今日我终于下定决心要做出改变，希望能通过我写的文章能和你们有所交流，共同进步。
文本溢出是页面展现比较常见的问题，我现在来说下我遇到过的解决方案。至于该采用哪种解决方案，是按需求来决定的。
我们先来看下默认的页面展现方式，这里我使用的是Chrome浏览器：
默认的页面展现方式
从上图中我们可以看出，中文和有标点符合和空格的英文是默认换行的，而连续的英文数字是默认不换行的。
最简单暴力的做法是在容器上添加overflow:hidden;，可以阻止文本（或其他任何东西）溢出容器。这个做法虽然可以解决视觉上的问题，但是也导致了文本变得不可访问，当然，如果可以接受移到容器上才能看到完整文本的话，那么我们可以给容器添加title=“文本”属性，效果如下图：
直接隐藏文本的方式
如果上述的做法不美观的话，我们可以再在容器上添加text-overflow:ellipsis;，效果如下图：
单行文本加省略号的文本
另外一种做法是给容器添加overflow:auto;，它会触发一个水平滚动条。有些场景是可以用这种解决方案的。
接下来我们来看看怎么将我们长文本换行，有哪几种解决方案。
我们可以先来看看word-break: break-all;，它可以在任何地方（除了句号和括号外）断开，有时可能会把单词直接断开了，效果如下图：
任何地方断开的方式
再来看看overflow-wrap: break-word;，它可以解决word-break: break-all;的问题，效果如下图：
比较完美的做法
以上是我工作中最常用的解决方案，希望对你们有帮助，如果有疑问的话，可以随时联系我。
网友评论