数字生活

现在各种屏幕大小参差不齐，网站页面响应式动态适应屏幕大小已经成为网站前端的标配。其中，超长文本适应不同文本框大小的动态截断就是一个比较照顾读者清晰的小方法。

单行文本处理方式

对于单行文本，常规的方法处理的已经比较美观，例如下面这段常用的代码

{
width: 500px;
white-space: nowrap;
overflowflow: hidden;
text-overflow: ellipsis;
}

多行文本处理

随着浏览器标准的提升和统一，特别是Chrome及相关内核的浏览器一统天下，对于多行文本的处理也比较容易了，使用如下代码，在包括Safari、firefox、手机端夸克等不同浏览器间的使用效果已经达到了统一。

{
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

响应式网页设计对于用户体验的提升至关重要。其中，相关文字排版的响应具有有重要的作用，不可忽视。随着学习的进度，本网站也将不断的分析网站响应式设计的内容。