君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
【小说写作】文章写作标点符号用法
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口由于您的浏览器禁用了javascript，无法正常使用本网站功能，
其它关键字
...安安，这辈子最郁闷的就是自己辛苦追了两年终于领了红本本的才子老公当众劈长腿，而且劈的还是自己闺密。觉得最不可思议的就是曾经玩过一夜情的男人三年以后竟然变成自己的同事，而且还玩心大起的准备再继续和自己玩猫腻。...
..欢迎留下爪爪印.............
内容标签：
都市情缘&七年之痒&婚恋&虐恋情深
搜索关键字：主角：艾安安.谢子良.顾文章 ┃ 配角： ┃ 其它：医院、医生、护士
文章基本信息
文章类型：
原创-言情-近代现代-爱情
作品视角：女主
作品风格：正剧
所属系列：
现代文之&护士
文章进度：连载中
全文字数：133063字
是否出版：
尚未出版（）
签约状态：
作品简评：
尚无任何作品简评
[爱她就炸她霸王票]
支持手机扫描二维码阅读
wap读点击：
晋江APP→右上角人头→右上角小框
用省略号结束一个故事
[收藏此文章]&&[下载]&
[推荐给朋友]
[灌溉营养液]
地雷（100点）
手榴弹（地雷×5）
火箭炮（地雷×10）
浅水炸弹（地雷×50）
深水鱼雷（地雷×100）
个深水鱼雷（自行填写数量）
那的八月的一天，刚上完晚班走出医院的大门。九点刚过，那边厢太……
今天晚上303房间6号床位那个被泼硫酸毁了容的女人，护士长一再交代……
耸耸肩，作无所谓状：“知道劝不了你，站够了没？要是够了就随我进……
又一天，又是一个阳光明媚的一天。说实话我一直就很喜欢秋天，小……
要说今天这眼睛还真是酸的要命。不是故意要弄写发酸的字眼，是真太……
第二天去医院的时候，王小灵告诉我说303那个泼硫酸的烈女今天上午尽?
出了食堂，今天中午的阳光好到让人嫉妒，很明媚，却一点也刺眼。……
后来我坐在手术室外的椅子上搬着脑袋很仔细的想了又想，觉得是该把……
可惜事情远不如我所料，此时站在门口的，不是西装革履的推销男，也……
晚上唐一美过来，买了清淡的小米粥。盖子一揭，清香扑鼻。肚子咕……
第二天去医院，自然的是顶着两个黑眼圈。一大早就听王小灵和几个小……
隔天去医院，一对黑眼圈比之前更加的恐怖，这回唐美妞不骂我了，而……
唐一美依旧不理我，已经三天了，这女人还是倔强的跟头牛一样。我……
第二天去医院，证实了医院新挖来的那人确实是顾文章。也知道昨天……
下午下班早早的离开，去了超市，酸奶柜台那里在搞促销。我觉得促……
照顾她睡下，关灯出房门，却在门口遇上一人。一双眼睛盯着我，声音……
早上刚和晚班的人交接好工作，王小灵就神秘兮兮的凑过来。“安安姐……
下午的时候本想说可以清闲一点了，没想今天门诊的人到一点不见少。……
晚上和唐一美去吃火锅，谢子良说什么也要跟着来。我觉得带着就带……
我突然没了再和它折腾的想法，关了灯拉了被子躺下去，决定还是我梦……
第二天去医院的时候，听到一个惊喜。说是顾文章要给那个断了腿的……
七年前，顾文章生日，那应该是我认识他的第一年，送给他的是一本自……
那老爷子是在三天之后走到尽头的。听当晚值班的护士说走的到还平……
第二天去上班的时候没见到唐美妞的身影，问她病房区的几个姐妹，才……
徐冬凡回来的时候我们正好在吃饭。唐一美其实心里已经原谅了他，……
谢子良这几天都没理我，即使走到碰了面，也是头一低装没看见的走开……
仔细想想，真的是要仔细去想，才能清楚的记起顾文章当年是怎样给我……
等我回忆完这些之后，太阳都已经飘到了另一边。手机在响，电话那……
街边是树木投下的影子，风吹过的时候却更显得的凄冷，酒吧一条街到……
第二天去医院，流言就已经传开。每一个从我身边经过的人，都会有……
我觉得自己这睡睡的可一点都不踏实，耳边貌似总是有那么一些吵闹的……
离开医院的时候还五点不到，又去常去的那家馄饨店，老板见来的是我……
接下来的几天到都是下雨，我觉得这个冬天可能会很冷。因为气温现……
[此章节已锁]
因为长期没人住在这里，所以热水器根本没有开，所以想立马用热水冲……
第二天回家的时候我哥和我嫂子全都一涌而上。
“这一夜未归，是到……
赖在床上的这几天里使劲想了个办法。
逮着个机会，着实地扮演了回……
后来拨通了电话，听声音应该是有一些年龄。
我问了他谢子良现在和……
在床上赖了几天之后这厮的情况到明显是有好转，光吃饭都能吃上两大……
中午在外面吃拉面，看到一对老夫妻，丈夫夹着妻子面里的羊肉放自己……
要说谢子良这厮也是心计譬深的，别的不说，就讨好人这方面，那也是……
第二天照样叫陈盈陪我去取照片，却在影楼里看到一熟悉的背影。
陈盈在旁边叫我的名字。“艾安安…不要又钻死胡同里去。”
笑话，……
不过很不凑巧，刚去医院就听说那人现在有一个大手术在做，可能还需……
三月的天，阳光很好，是个明媚的季节。
从宽大明亮的落地窗户向外……
下午下班，林木海又自告奋勇的要送我回家，从上次答应给他一个月期……
隔天去上班，本来一大早在上班之前还会互相玩笑打闹的同事今天却全……
我看着他年轻的脸庞。淡然一笑，又看着草地上戏耍的孩童，对他说：……
所有人都走之后，我对着林木海，很真诚的说了一声谢谢！
他装傻一……
总下载数：0
非V章节总点击数：　　
总书评数：20
当前被收藏数：13
文章积分：3,205,465
系统：　发
给：《用省略号结束一个故事》　　时间： 10:57:02
配合国家网络内容治理，本文第34章现被【锁章待改】，请作者参考后台站内短信查看原因，检查文章内容，并立即修改，谢谢配合。
本文相关话题如何用 CSS 实现多行文本的省略号显示 - WEB前端 - 伯乐在线
& 如何用 CSS 实现多行文本的省略号显示
本文翻译自,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。
合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：
overflow: hidden直接隐藏多余的文本
text-overflow: ellipsis只适用于单行文本的处理
各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流（relayout）后的布局信息，如宽度
英文原文写作时间是号，比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-line-clamp，它并不是CSS规范中的属性。利用该属性实现多行文本的省略号显示需要配合其他三个属性：display: -webkit-box、-webkit-box-orient、text-overflow:。其中，-webkit-line-clamp设置块元素包含的文本行数；display: -webkit-box设置块元素的布局为伸缩布局；-webkit-box-orient设置伸缩项的布局方向；text-overflow:则表示超出盒子的部分使用省略号表示。
不过本文将要介绍的方法是采用CSS规范中的属性，并结合特殊的实现技巧完成的。这意味着在实现CSS2.1规范的浏览器中都是可以兼容的，不将仅仅是纯粹的移动端领域，在传统的PC浏览器（你们懂得我指的是哪些浏览器）中仍是可行的。好吧，让我们一起见识下。
CSS实现多行文本溢出的省略号显示
我们把实现的细节划分为7个步骤，在这个实现过程中最简单的就是截断文本，而最难的部分则是让一个元素处在其父包含块溢出时的右下方，并且当父元素未溢出时该元素消失不可见。为了去难避易，我们先从比较简单的地方开始–当父包含框比较小时，将子元素布局到父包含框的右下角。
其实这个实现完全利用了元素浮动的基本规则。在这里不详细讲解CSS2.1规范中的几种情形，不明白的读者自行查阅。这段代码实现很简单，就是三个子元素和包含块的高度及浮动设置：
JavaScript
&div class="wrap"&
&div class="prop"&1.prop&br&float:left&/div&
&div class="main"&2.main&br&float:right&br&Fairly short text&/div&
&div class="end"&3.end&br&float:right&/div&
width: 400 height: 200
margin: 20px 20px 50
border: 5px solid #AAA;
line-height: 25
width: 100 height: 200
background: #FAF; }
width: 300
background: #AFF; }
width: 100
background: #FFA; }
12345678910111213141516171819202122232425
&div class="wrap"&&&&div class="prop"&1.prop&br&float:left&/div&&&&div class="main"&2.main&br&float:right&br&Fairly short text&/div&&&&div class="end"&3.end&br&float:right&/div&&/div&&.wrap {&&width: 400px; height: 200px;&&&&margin: 20px 20px 50px;&&&&border: 5px solid #AAA;&&&&line-height: 25px; }&.prop {&&&&float: left;&&&&width: 100px; height: 200px; &&&&background: #FAF; }.main {&&&&float: right;&&&&width: 300px; &&&&background: #AFF; }.end {&&&&float: right;&&&&width: 100px;&&&&background: #FFA; }
2nd 模拟场景
我们通过创建一个子元素来替代将要显示的省略号，当文本溢出的情形下该元素显示在正确的位置上。在接下来的实现中，我们创建了一个realend元素，并利用上一节end元素浮动后的位置来实现realend元素的定位。
JavaScript
&div class="wrap"&
&div class="prop"&
1.prop&br&
float:right&/div&
&div class="main"&
2.main&br&
float:left&br&
Fairly short text&/div&
&div class="end"&
&div class="realend"&
4.realend&br&
position:absolute&/div&
3.end&br&float:right
float: position:
width: 100
background: #FFA; }
.realend {
width: 100%;
background: #FAA; font-size: 13 }
1234567891011121314151617181920212223242526
&div class="wrap"&&&&div class="prop"&&& 1.prop&br&&& float:right&/div&&&&div class="main"&&& 2.main&br&&& float:left&br&&& Fairly short text&/div&&&&div class="end"&&& &div class="realend"&&&&& 4.realend&br&&&&& position:absolute&/div&&&3.end&br&float:right&&&/div&&/div&&.end {&&&&float: right; position: relative;&&&&width: 100px;&&&&background: #FFA; }.realend {&&&&position: absolute;&&&&width: 100%;&&&&top: -50px;&&&&left: 300px;&&&&background: #FAA; font-size: 13px; }
这一步中，我们主要关心的是realend元素的定位，基于浮动后的end元素设置偏移量，当end元素浮动到第一节第二章图的位置时（即在prop元素的下方），此时realend元素正好处在end元素的上方50px，右侧300px-100px=200px处，而该位置正是父包含框wrap元素的右下角，此时正是我们期待的结果：
若父元素并没有溢出，那么realend元素会出现在其右侧
这种情况解决很简单，请看下文之第七节，此处仅作实例说明。
3rd 优化定位模型
在第二节中，我们针对end元素设置了相对定位，对realend元素设置绝对定位。但是我们可以采用更为简单的代码来实现，即只使用相对定位。熟悉定位模型的同学应该知道，相对定位的元素仍然占据文本流，同时仍可针对元素设置偏移。这样，就可以去掉end元素，仅针对realend元素设置相对定位。
JavaScript
&div class="wrap"&
&div class="prop"&1.prop&br&float:right&/div&
&div class="main"&2.main&br&float:left&br&Fairly short text&/div&
&div class="realend"&
3.realend&br&position:relative&/div&
.realend {
width: 100
top: -50 left: 300
background: #FAA; font-size: 14 }
12345678910111213
&div class="wrap"&&&&div class="prop"&1.prop&br&float:right&/div&&&&div class="main"&2.main&br&float:left&br&Fairly short text&/div&&&&div class="realend"&&&3.realend&br&position:relative&/div&&/div&&.realend {&&&&float: right; &&&&&&&&position: relative;&&&&width: 100px; &&&&top: -50px; left: 300px;&&&&background: #FAA; font-size: 14px; }
其他的属性并不改变，效果一样。
4th 削窄prop元素
目前，最左侧的prop元素的作用在于让realend元素在文本溢出时处在其正下方，在前几节的示例代码中为了直观的演示，设置prop元素的宽度为100px，那么现在为了更好的模拟实际的效果，我们缩小逐渐缩小prop元素的宽度。
JavaScript
&div class="wrap"&
&div class="prop"&1.prop&br&float:right&/div&
&div class="main"&2.main&br&float:left&br&Fairly short text&/div&
&div class="realend"&
3.realend&br&position:relative&/div&
height: 200
background: #F0F; }
width: 300
margin-left: -5
background: #AFF; }
.realend {
width: 100
margin-left: -100
padding-right: 5
background: #FAA; font-size: 14 }
123456789101112131415161718192021222324252627
&div class="wrap"&&&&div class="prop"&1.prop&br&float:right&/div&&&&div class="main"&2.main&br&float:left&br&Fairly short text&/div&&&&div class="realend"&&&3.realend&br&position:relative&/div&&/div&&&.prop {&&float: left;&&width: 5px; &&height: 200px; &&background: #F0F; }.main {&&&&float: right;&&&&width: 300px; &&&&margin-left: -5px;&&&&background: #AFF; }.realend {&&&&float: right; &&&&&&&&position: relative;&&&&top: -50px; &&&&&&&&left: 300px;&&&&width: 100px; &&&&&&&&margin-left: -100px;&&&&padding-right: 5px;&&&&background: #FAA; font-size: 14px; }
针对prop元素，缩小宽度为5px，其余属性不变；
针对main元素，设置margin-left:5px，让main元素左移5px，这样main元素在宽度上就完全占满了父元素；
对于realend元素，top、left和width的值不变。而设置margin-left: -100px、padding-right: 5px则是为了让realend元素的盒模型的最终宽度计算为5px。
BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightW
BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;
具体可参考我之前的文章一文。
由于CSS规范规定padding的值不可以为负数，因此只有设置margind-left为负值，且等于其宽度。这样做的最终目的就是保证realend元素处在prop元素的下方，保证在文本溢出的情况下定位准确性:
5th 继续优化：流式布局+伪元素
目前，realend元素的相关属性仍采用px度量，为了更好的扩展性，可以改用%替代。
同时，prop元素和realend元素可以采用伪元素来实现，减少额外标签的使用。
JavaScript
&div class="ellipsis"&
&div&2.main&br&float:left&br&Fairly short text
/*相当于之前的prop元素*/
.ellipsis:before {
content: "";
width: 5 height: 200
background: #F0F; }
/*相当于之前的main元素*/
.ellipsis & *:first-child {
width: 100%;
margin-left: -5
background: #AFF; }
/*相当于之前的realend元素*/
.ellipsis:after {
content: "realend";
float: position:
top: -25 left: 100%;
width: 100 margin-left: -100
padding-right: 5
background: #FAA; font-size: 14 }
12345678910111213141516171819202122232425
&div class="ellipsis"&&&&div&2.main&br&float:left&br&Fairly short text&&&/div&&/div&&/*相当于之前的prop元素*/.ellipsis:before { &&&&content: "";&&&&float: left;&&&&width: 5px; height: 200px; &&&&background: #F0F; }/*相当于之前的main元素*/.ellipsis & *:first-child {&&&&float: right;&&&&width: 100%; &&&&margin-left: -5px;&&&&background: #AFF; }/*相当于之前的realend元素*/.ellipsis:after {&&&&content: "realend";&&&&float: right; position: relative;&&&&top: -25px; left: 100%;&&&&width: 100px; margin-left: -100px;&&&&padding-right: 5px;&&&&background: #FAA; font-size: 14px; }
效果图和上节一样。
之前的实现中在文本未溢出的情况下，realend元素会出现在父元素的右侧，正如。解决此问题很简单，急需要设置：
.ellipsis{
.ellipsis{&&overflow:hidden;}
即可解决问题。
7th 大功告成
现在我们离完结就差一步了，即去掉各元素的背景色，并且用“…”替换文本。最后为了优化体验，采用渐变来隐藏“…”覆盖的文本，并设置了一些兼容性的属性。
到了此处，相信现在关心的只是CSS的代码了：
.ellipsis {
height: 200
line-height: 25
margin: 20
border: 5px solid #AAA; }
.ellipsis:before {
content:"";
width: 5 height: 200 }
.ellipsis & *:first-child {
width: 100%;
margin-left: -5 }
.ellipsis:after {
content: "\02026";
box-sizing: content-
-webkit-box-sizing: content-
-moz-box-sizing: content-
float: position:
top: -25 left: 100%;
width: 3 margin-left: -3
padding-right: 5
text-align:
background-size: 100% 100%;
/* 512x1 image, gradient for IE9. Transparent at 0% -& white at 50% -& white at 100%.*/
background-image: url(data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
12345678910111213141516171819202122232425262728293031323334353637383940414243
.ellipsis {&&overflow: hidden;&&height: 200px;&&&&line-height: 25px;&&&&margin: 20px;&&&&border: 5px solid #AAA; }&.ellipsis:before {&&&&content:"";&&&&float: left;&&&&width: 5px; height: 200px; }&.ellipsis & *:first-child {&&&&float: right;&&&&width: 100%;&&&&margin-left: -5px; }&&&&&&&&&.ellipsis:after {&&&&content: "\02026";&&&&&&&box-sizing: content-box;&&&&-webkit-box-sizing: content-box;&&&&-moz-box-sizing: content-box;&&&&&float: right; position: relative;&&&&top: -25px; left: 100%; &&&&width: 3em; margin-left: -3em;&&&&padding-right: 5px;&&&&&&&&text-align: right;&&&&&&&&&&&background-size: 100% 100%;&&/* 512x1 image, gradient for IE9. Transparent at 0% -& white at 50% -& white at 100%.*/background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);&&&&&&background: -webkit-gradient(linear, left top, right top,&&&&&&&&from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));&&&&background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);&&&&&&&&&& &&&&background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);&&&&background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);&&&&background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);}
总结之兼容性
从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。
打赏支持我写出更多好文章，谢谢！
打赏支持我写出更多好文章，谢谢！
关于作者：
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线