学习笔记之段落里面最后出现省略号

学习笔记之段落里面最后出现省略号

　　我曾经想在我的github博客里面弄一个文章摘要出来，固定一个高度，overflow的话就hidden，但是我又想段落的最后出现省略号（...），证明这个文章还没结束，当时我第一个想到的CSS属性是text-overflow，接着它有一个值是ellipsis，可以让溢出的文字hidden并在后面显示省略号（...）,但是我用这个方法并不能在我的那段摘要的最后实现省略号，究其原因，text-overflow：ellipsis只在单独的一行文本中有效。而这些天看到CSS-Tricks的一个外链博客文章就讲述了多行text-overflow ellipsis的实现，地址：Multi-line Text Overflow Ellipsis。它里面是使用纯CSS实现的多行文本超出出现省略号的，而且它最大的妙处就是巧用了position：relative这一样式，还有浮动的特性，虽然实现有点繁琐，但是他的实现思想很具有创造性。

　　1. idea

　　wrap是外面包裹的大框，有固定的宽度和高度；接着prop向左浮动，有固定的宽度还有跟父亲一样的高度；main向右浮动，宽度等于父亲宽度减去prop的宽度，高度不定；end向右浮动，宽度这里设置了100px；当main里面的文本没有超出wrap的包裹大框时，表现如图1.1；当main里面的文本超出wrap大框时，end浮动到main的左边去了。效果如图1.2。

<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>

<div class="wrap">
  <div class="prop">1.prop<br>float:left</div>
    <div class="main">2.main<br>float:right<br>Call me Ishmael.  Some years ago &ndash;
 never mind how long precisely &ndash; having little or no money in my purse, and nothing 
particular to interest me on shore, I thought I would sail about a little and see the watery 
part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.</div>
    <div class="end">3.end<br>float:right</div>
</div>

html, body { margin: 0; padding: 0; font-family: sans-serif; }

.prop, .main, .end {
  opacity: 0.7;
}
.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; }

效果：

图1.1

图1.2

　　2. switchback

　　在end里面在加多一个class为realend的层。这个realend相对end层绝对定位，让realend层定位在wrap大框的右下角。

图2.1

<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>

<div class="wrap">
    <div class="prop">1.prop<br>float:right</div>
    <div class="main">2.main<br>float:left<br>Call me Ishmael.  Some years ago &ndash; 
never mind how long precisely &ndash; having little or no money in my purse, and nothing 
particular to interest me on shore, I thought I would sail about a little and see the watery 
part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.</div>
    <div class="end"><div class="realend">4.realend<br>position:absolute</div>3.end<br>float:right</div>
</div>

html, body { margin: 0; padding: 0; font-family: sans-serif;}

.prop, .main, .end {
  opacity: 0.7;
}
.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; position: relative;
    width: 100px;
    background: #FFA; }
.realend {
    position: absolute;
    width: 100%;                   /*跟父亲end层一样的宽度*/
    top: -50px;　　　　　　　　　　　 /*父亲end层的高度，比父亲刚好高一个它自身的高度*/
    left: 300px;                   /*main的宽度*/
    background: #FAA; font-size: 13px; }

效果如下：

图2.2

图2.3

　　3. relative

　　将end层去掉，把realend层的position：absolute改成position：relative，使用relative是完美的，因为相对定位是相对于它自身的定位，假设如图2.3那样，realend自身的定位在数字3那里的块，相对定位后的位置在数字4那个块那里，由于相对定位不会把元素从文档流中移除，所以当文档处在超不超出包裹层时候，一超过realend的变动就像从图2.2到图2.3那样的变动。

<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>

<div class="wrap">
    <div class="prop">1.prop<br>float:right</div>
    <div class="main">2.main<br>float:left<br>Call me Ishmael.  Some years ago &ndash; 
never mind how long precisely &ndash; having little or no money in my purse, and nothing 
particular to interest me on shore, I thought I would sail about a little and see the 
watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.</div>
    <div class="realend">3.realend<br>position:relative</div>
</div>

html, body { margin: 0; padding: 0; font-family: sans-serif;}

.prop, .main, .end {
  opacity: 0.7;
}
.wrap {
    width: 400px; margin: 20px 20px 50px; height: 200px;
    line-height: 25px; border: 5px solid #AAA;
}

.prop {
    float: left;
    width: 100px; height: 200px; 
    background: #FAF; }
.main {
    float: right;
    width: 300px; 
    background: #AFF; }
.realend {
    float: right; position: relative;             /*使用相对定位*/
    width: 100px; 
    top: -50px;    left: 300px;
    background: #FAA; font-size: 14px; }

　　4. narrow

　　prop层的宽度比较大，有点占位置，这里把他的宽度调小，而realend层也有所变动，因为一开始prop层的宽度跟realend层是一样的，这里realend层宽度要变小但是realend的宽度不应该被改变，所以做进一步的CSS调整。html代码没有改变。

　　

html, body { margin: 0; padding: 0; font-family: sans-serif;}

.prop, .main, .end {
  opacity: 0.7;
}
.wrap {
  width: 300px; margin: 20px 20px 50px; height: 200px;
  line-height: 25px; border: 5px solid #AAA;
}

.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;                /*这里为何是加padding-right还是有点搞不大懂，去掉的话整个层会上到框线的右上面*/
    background: #FAA; font-size: 14px; }

　　5. fluid

　　把包裹层的宽度大小设置为流式，当浏览器的窗口改变时，文档也相应的改变，main层的width改成：100%，realend的left改成100%。

　　6. sweep

　　将prop层和realend替换成：before和：after的内容，让标签更简洁易懂，把wrap重命名为ellipsis。

<div class="ellipsis"><div>2.main<br>float:right<br>Fairly short text
</div></div>

<div class="ellipsis"><div>2.main<br>float:right<br>Call me Ishmael.  Some years ago &ndash; 
never mind how long precisely &ndash; having little or no money in my purse, and nothing 
particular to interest me on shore, I thought I would sail about a little and see the watery 
part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.
</div></div>

　　

html, body { margin: 0; padding: 0; font-family: sans-serif;}  

.ellipsis:before, .ellipsis:after, .ellipsis > * {
    opacity: 0.7; }

.ellipsis {
    width: 50%; margin: 20px 20px 50px; height: 200px;
    line-height: 25px; border: 5px solid #AAA; }

.ellipsis:before {
    content: "";
    float: left;
    width: 5px; height: 200px; 
    background: #F0F; }
.ellipsis > *:first-child {
    float: right;
    width: 100%; 
    margin-left: -5px;
    background: #AFF; }
.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; }

　　7. overflow

　　在ellipsis层加上overflow：hidden，把突出的文本隐藏掉。

　　8. complete

　　将：after的content改成省略号，接着再加上一些渐变效果。

　　

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.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+T
dKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZply
dZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmS
bZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a
0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/z
UL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqv
Yxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);        /*使用了data uri*/ 
    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);

}

最终效果：

图8.1

　　9. readmore

　　有时这段话只是文章的一段摘要，很多时候读者看完这段摘要都想知道更多，所以一般来说文章缩略之后有一个read more的按钮，这里就把ellipsis:after中content内容改成“省略号 read more”，把整个a链接覆盖在整篇摘要文章上。

　　浏览器支持：firefox 15，chrome 21.0.1180.89，IE9（标准模式下），IE8（有省略号出现，没有渐变），Opera 11.61

　　题外话：其实有个关于弄省略号很好的插件：trunk8（值得一看）；还有就是在opera下有一个opera专有属性能够让文章最后出现省略号的text-overflow: -o-ellipsis-lastline。

　　总结：其实我觉得这是一个有意思的教程，从这个教程中也解决了我之前的那个问题，而且还学到了position：relative并不是仅仅用于作为后代元素相对自己定位的一个载点，它还能实现一些可实现的，这就在于我们是否灵活运用了它了。