绍

介绍

今天我们来讲讲响应对象TFResponse，它也是系统级别的对象，它负责视图的输出。也就是说用户在浏览器上看到的一些网页内容都是通过TFResponse响应对象输出出来的。输出数据包括很多属性，如：响应数据类型、响应数据大小、服务器信息、服务器指令等等。

响应对象TFResponse

首先我们先建立TFResponse这个响应对象，程序文件保存在System/TFResponse.inc.php。

响应头

响应头和请求头相似的、相对的。请求头是浏览器组织起来的数据，浏览器会将请求头发送给服务器。而响应头是服务器组织起来的数据，服务器会根据浏览器送过来的请求头找到对应的请求资源，并把资源数据的信息组织成响应头送回给浏览器。

下面给出一个完整的响应头信息示例：

200 OK HTTP/1.1
Connection: keep-alive
Content-Type: text/html; charset=UTF-8
Date: Sun, 08 Nov 2020 10:50:09 GMT
Server: nginx
Transfer-Encoding: chunked
X-Powered-By: PHP/7.4.6

响应状态

在响应头的第一行会有一个三位数字和一个短语，这个就是服务器响应用户请求的状态信息。三位数字表示响应状态码，而短语则是响应状态的文字信息。举例来说：响应状态信息“200 OK”就表示用户请求的资源找到了且正常下载下来了，后面的短语也很直观地反应了这个结果。

响应状态对照表

响应状态有很多，下面福哥给出一个比较全面的状态信息对照给大家：

100，Continue101，Switching Protocols102，Processing200，OK201，Created202，Accepted203，Non-Authoritative Information204，No Content205，Reset Content206，Partial Content207，Multi-Status300，Multiple Choices301，Moved Permanently302，Move temporarily303，See Other304，Not Modified305，Use Proxy306，Switch Proxy307，Temporary Redirect400，Bad Request401，Unauthorized402，Payment Required403，Forbidden404，Not Found405，Method Not Allowed406，Not Acceptable407，Proxy Authentication Required408，Request Timeout409，Conflict410，Gone411，Length Required412，Precondition Failed413，Request Entity Too Large414，Request-URI Too Long415，Unsupported Media Type416，Requested Range Not Satisfiable417，Expectation Failed421，Too Many Connections422，Unprocessable Entity423，Locked424，Failed Dependency425，Unordered Collection426，Upgrade Required449，Retry With451，Unavailable For Legal Reasons500，Internal Server Error501，Not Implemented502，Bad Gateway503，Service Unavailable504，Gateway Timeout505，HTTP Version Not Supported506，Variant Also Negotiates507，Insufficient Storage509，Bandwidth Limit Exceeded510，Not Extended600，Unparseable Response Headers

设置响应状态

响应状态必须在响应头第一行，在PHP语言里可以通过内建的header函数设置响应头信息，通过header设置响应状态信息的方法如下：

header("HTTP/1.1 200 OK");

数据类型

在响应头里我们需要告诉浏览器用户请求的资源是什么数据类型。数据类型很好理解，通俗地说就是：用户打开的是一个网页？一张图片？一个MP3？还是一段视频？这些格式就是我们说的数据类型了。举例来说：JPG格式的图片对应的数据类型就是“image/jpeg”，MP3音乐对应的数据类型就是“audio/mpeg”，普通网页就是“text/html”。

MIME类型

数据类型通过一个标准格式描述，这种格式称之为MIME类型，专门用于HTTP协议的响应头的数据类型。下面福哥整理了一些常用的数据类型和文件扩展名的对照给大家：

html，text/htmlhtm，text/htmltxt，text/plainjson，application/jsonjs，text/javascriptcss，text/cssjpg，image/jpegjpeg，image/jpegpjpeg，image/jpegpng，image/pnggif，image/gif

大家可能已经发现了，很多不同的扩展名对应的MIME类型是一样的，这说明了这些有着一样MIME类型的文件它们的结构是一样的，可以通过一样的工具打开或编辑或运行。

数据长度

响应头里需要告诉浏览器用户请求的资源有多大，这样浏览器才知道需要下载多少数据才能下载完成。这个数据长度需要显性地告知浏览器，且需要在响应体里给出这样多的数据给浏览器才行。

除了显性告知浏览器数据长度外，还有一种方式让浏览器知道如何下载资源内容，就是使用chunked编码方式。

chunked

所谓chunked编码方式就是将资源内容一块一块地推送给浏览器，每一块数据推送之前都会告知这一块数据的长度，而每一块数据不会太长。

这一块一块的数据的长度通过一个16进制数字表示，在数据长度后面用一个CRLF换行符表示块长度结束，在CRLF后面就是块数据了，块数据的长度必须和前面的数字声明的一样。

下面举例：

15（十进制21）福哥，你真棒！（这一段文字长度也是21）2a（十进制42）我要和跟着福哥好好学习编程~~

总结

今天福哥给大家讲解了关于web请求的响应头的相关知识，童鞋们知道了响应头的响应状态是怎么回事了，童鞋们也了解了关于MIME类型的作用，童鞋们还明白了两种响应数据长度的不同，知道了chunked的原理。

下一课福哥要开始带着大家实现响应对象TFResponse的功能了，今天课上的知识童鞋们下去一定要好好研读哦~

https://m.tongfu.net/home/35/blog/512871.html

mac 文件管理中有这样一个小细节。

1. 当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示
2. 当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名

一个很微妙但非常人性化的细节（ps.都能完全看见也就不需要提示了）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~

一、CSS 实现思路

相信大家都知道 title 这个属性，原生的提示就用这个了，可以说从上古世纪就开始支持，下面是 MDN 上关于这个属性的介绍

title 全局属性 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户

用法也非常简单

<p  class="txt" title="这是absolute">元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
</p>

这里 title 的表现样式还有停留时间与操作系统和浏览器有关，也不可修改

现在问题来了，title 属性是预先添加的，并且无法通过样式来控制是否显示，那么，CSS 如何做到动态处理呢？接着往下看

虽然 CSS 无法动态去改变 title 属性，换个思路，假如有两份相同的文本，其中一份是带有 title 属性的，比如

<p class="wrap">
  <span class="txt">元素会被移出正常文档流，并不为元素预留</span>
  <span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留</span>
</p>

为了方便演示，这里给带有 title 属性的文本加上背景色，然后暂且称为 文本A 和 文本B 吧（以下适用），如下所示

现在只需要在单行文本的时候展示 文本A ，多行文本的时候展示 文本B，就可以实现我们想要的功能了。

那么，如何判断文本是否超出一行呢？

二、多行文本判断

首先，当文本超出一行时，高度必然会发生变化（），假设行高为 1.5，那么1行文本就是 1.5em，2行就是 3em，依次类推...

但是，如果我们限制A的最大高度为两行，那么一行和多行不就区分开了吗（单行高度是1.5em，多行高度是3em）

.txt{
  display: block;
  max-height: 3em;/*最大高度为2行*/
}

现在关键的一步来了，把文本B 往上移动2行的距离，这里用相对定位实现（margin也可以）

.title{
  position: relative;
  top: -3em; 
}

是不是有点奇怪了？其实就是往上位移了2行的距离，这样在文本A 只有一行的时候，文本B 就刚好“出界”了；在文本A 有多行的时候，由于高度只有2行的高度，文本B 刚好“覆盖”在上面，原理示意如下

这时，如果把父级的高度限制在一行，并且把文本B做单行截断

.wrap{
  line-height: 1.5;
  height: 1.5em;
}
.title{
  position: relative;
  top: -3em; 
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

这样，在多行的时候，视野内看到的就是文本B了，效果如下

最后，把父级超出隐藏，还有文本B背景设置成父级相同的颜色就可以了~

到这里为止，就实现了文章开头所示的效果，完整代码可以查看 codepen auto title（记得鼠标放上去o~）

为了更方便直观的演示，这里做了一个类似的列表如下

在线例子可访问 codepen auto title list（记得鼠标放上去o~）

三、其他实用案例

下面再介绍两个更加实用的提示效果

1. 中间省略效果

细心的小伙伴可能已经发现，文章开头的文本超出时，省略号是在中间的。

这种设计有什么好处呢？比如有时候很多文件的名称是相同的，只有后缀名不同，或者很多会有个版本号，举个栗子：

当宽度较小时，末尾出现了省略号，这就很尴尬了，由于前面都是一样的，一眼看上去完全分不清文件名哪个跟哪个（）

如果省略号在中间就很好区分了。那么，如何实现这一效果呢？

借助上面的布局，下面所有分析只需要对 文本B 进行处理就行了。关于中间省略效果，目前还没有专门的 CSS 样式可以实现，不过可以模拟它，接着往下看

首先，复制一份文本，这里使用 ::before 伪类通过 content 生成

.title::before{
    content: attr(title);
}

很明显，这个时候两段文本是连接在一起的

然后，给 :before 设置右浮动，宽度设置成 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}

接着，给 :before 设置超出截断

.title::before{
    /**/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最后，把 :before 换成前面省略号的效果，可以用 direction 实现，关于 direction，平时可能没怎么接触，其实就是改变排版方向的，默认是从左到右，省略号在右侧，如果改成从右到左，那么省略号也会在左边，所以

.title::before{
    /**/
    direction: rtl; /*从右到左*/
}

现在看看完成效果吧

有一点小问题，中间的省略号左边的空隙有时候有点大，如下

这个是因为这个地方刚好换行了，所有空出了一小截。这里可以用文本两端对齐简单优化一下

.title{
    /**/
    text-align: justify;
}

这样就能保证最右端的文字是靠右的（当然文本的间隙会略微增加一点~），效果如下

在线例子可访问 codepen auto middle ellipsis（记得鼠标放上去o~）

2. 超出滚动效果

有时候，title 提示可能有点弱，不够明显，产品需要文本超出的时候，鼠标放上去可以自动滚动起来，类似这样的效果

如何实现的呢？其实借助上面的布局，这里实现就非常容易了，只需要对 文本B 做滚动动画即可，关于 CSS3实现无缝滚动，这里介绍一下实现：

要做到首尾无缝滚动，首先需要复制一份相同的文本，这里使用 ::after 伪元素通过 content 生成

.title::after{
    content: attr(data-title);/*复制一份文本，下图绿色的部分*/
}

现在需要在一行显示，不换行

.title{
    /**/
    white-space: nowrap;
}

可以看到，虽然不换行了，但是宽度还是父级的宽度，并没有跟随文字内容，这时，可以设置 display: inline-block

.title{
    /**/
    display: inline-block;
    white-space: nowrap;
}

关于宽度跟随文字内容，其实还可以用 width: max-content 实现，兼容性略差

.title{
    /*
    display: inline-block;
    white-space: nowrap;
    */
    width: max-content;
}

接着，设置 animation 动画即可，只需要当 transform 位移到 自身一半50% 时 迅速归位，就能达到无缝衔接的效果，如下

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
    }
}

这里首尾的间隙是用 padding 实现的

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*无缝滚动的首位间隙*/
}

在线例子可访问 codepen auto scroll list（记得鼠标放上去o~）

唯一的缺陷是动画时间是固定的，如果文本很长，可能出现滚动过快的问题

四、总结和说明

本文介绍了一种全新 CSS 自动判断多行文本的思路，并且带来3个人性化的小交互。总的来说，其实也没用到太多的技巧（主要还是想象力），结构还不算复杂，相信一步步看下来不会有很大的难度。

重点依旧是上面的布局部分，布局出来了，下面很多扩展效果也就迎刃而解了。由于只用到了 CSS2 相关特性（max-height、文本截断等），兼容性也是棒棒的，实测可以兼容到 IE7+（全兼容，放心使用），后面的超出滚动效果兼容到 IE10+， 现在总结一下实现重点：

1. 转换思路，节点复制是一个好办法
2. 通过 max-height 可以判断单行和多行
3. 灵活运用 CSS 障眼法 层级覆盖和超出隐藏
4. direction：rtl 可以实现前置省略号的效果
5. 中间省略号可以用两段文本拼接的方式模拟
6. 宽度跟随文本自适应可以用 inline-block 实现
7. 无缝滚动效果可以用位移 -50% 来实现

好了，这样一个成本低廉，又非常人性化的小功能，赶紧用起来吧。如果大家觉得不错的话，欢迎点赞、收藏、转发???~

References

[1] [codepen auto title] https://codepen.io/xboxyan/pen/WNppXxx

[2] [codepen auto title list] https://codepen.io/xboxyan/pen/eYvveBe

[3] [codepen auto middle ellipsis] https://codepen.io/xboxyan/pen/VwpPNbm

[3] [codepen auto scroll list] https://codepen.io/xboxyan/pen/ZEeerBb