包含“更多”链接的CSS文本省略号

所以我有下面的小提琴在文本中将省略号设置为两行。然后，我希望在文本中内嵌“更多”链接。包含“更多”链接的CSS文本省略号

所以，如果我们的文本有超过两行，它应该是这样的：

enter image description here

这是正确的。但是：

enter image description here

这是不正确（应为内联与文本）。

代码如下所示：

<div class="text"> 
    <div>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i</div> 
    <a href="#">More</a> 
</div>

而CSS：

.text{ 
    display: inline; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    line-height: 24px;  /* fallback */ 
    max-height: 48px;  /* fallback */ 
    -webkit-line-clamp: 2; /* number of lines to show */ 
    -webkit-box-orient: vertical; 
} 

.text a { 
    position: absolute; 
}

我猜一定是容易...谢谢你在前进。

来源

2014-09-23 Ferran Negre

难道你不能把'a'放在那个div里吗？ – 2014-09-23 19:19:12

'如果我们的文本超过两行'=>听起来像javascript。并且当用户调整窗口大小时（为了保持正确的行为），你需要事件 – 2014-09-23 19:24:13

这个省略号属性正在关注2行......如果我在div中写入一个... http://jsfiddle.net/ csYjC/2879 /如果“更多”是在同一行中，但没有，则不会。 – 2014-09-23 19:29:24

.text中的div仍在显示为块元素。使用该修复：

.text > div { display: inline; }

http://jsfiddle.net/csYjC/2880/

来源

2014-09-23 19:32:45

嗨，这使得“More”以正确的方式与文本内联。但请注意，如果您调整窗口大小，则More不在正确的位置（有点疯狂）。而且，我刚刚意识到，在Firefox中，省略号不起作用。 – 2014-09-23 19:35:12

@FerranNegre更改为'.text a {position：relative;}'http://jsfiddle.net/hegsgwrv/ – OJFord 2014-09-23 19:39:44

嗨。我试过了。还是行不通。现在总是与文本内联（当两行完成时，我希望它在下面）。如果您调整大小，您会看到“更多”链接消失。 Firefox仍然没有省略...这可能是另一回事。 – 2014-09-23 19:42:38

DEMO：http://jsbin.com/hatuv/1/edit

<div class="text"> 
    <p>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i </p> <a href="#">More</a> 
    </div>

CSS

.text { 
    overflow: hidden /* just for clearing */ 
} 
.text p { 
    display: inline-block; 
    text-overflow: ellipsis; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    margin-top: 0; 
    box-sizing: border-box; 
    padding-right: 40px; 
    margin-right: -40px; 
} 
.text a { 
    float: right 
}

来源

2014-09-23 19:45:34 Christina

这看起来不错。当文本已经适合所有行时，是否可以使“更多”按钮进入文本下方？而且，你只用了1行，我正在用2行。 – 2014-09-23 19:48:04

如果没有jQuery脚本，我无法使用多线程工作，这就是我最终使用的。 jQuery Succinct插件 – Christina 2014-09-23 19:49:51

@FerranNegre - 火狐和多行给我的问题，所以我放弃了，并最终使用jQuery Succinct插件 – Christina 2014-09-23 19:50:24

-2

只需添加到div的一些类，并给它display:inline;：

<div class="text"> 
    <div class="loremclass">Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet</div> 
    <a href="#">More</a> 
</div>

和

body { 
    margin: 20px; 
} 

.text{ 
    display: inline; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    line-height: 24px;  /* fallback */ 
    max-height: 48px;  /* fallback */ 
    -webkit-line-clamp: 2; /* number of lines to show */ 
    -webkit-box-orient: vertical; 
} 

.text a { 
    position: absolute; 
} 
.loremclass{display:inline;}

来源

2014-09-23 19:51:34 developppper

当文本不适合全部2行时，不会将“更多”链接内联文本。 – 2014-09-23 19:53:23

我现在更新了。请立即尝试。 – developppper 2014-09-23 19:54:40

现在是像我们以前试过。如果不与文本内联（“重新调整窗口的大小”），则“更多”会处于疯狂的位置。 – 2014-09-23 19:55:38

-1

上-webkit-线夹持器的纯CSS方法的基础上，你可以自定义的...更多内容像一个老板：

@-webkit-keyframes ellipsis {/*for test*/ 
 
    0% { width: 622px } 
 
    50% { width: 311px } 
 
    100% { width: 622px } 
 
} 
 
.ellipsis { 
 
    max-height: 40px;/* h*n */ 
 
    overflow: hidden; 
 
    background: #eee; 
 

 
    -webkit-animation: ellipsis ease 5s infinite;/*for test*/ 
 
    /** 
 
    overflow: visible; 
 
    /**/ 
 
} 
 
.ellipsis .content { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-pack: center; 
 
    font-size: 50px;/* w */ 
 
    line-height: 20px;/* line-height h */ 
 
    color: transparent; 
 
    -webkit-line-clamp: 2;/* max row number n */ 
 
    vertical-align: top; 
 
} 
 
.ellipsis .text { 
 
    display: inline; 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
    color: #000; 
 
} 
 
.ellipsis .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 

 
    /** 
 
    overflow: visible; 
 
    left: 0; 
 
    background: rgba(0,0,0,.5); 
 
    /**/ 
 
} 
 
.ellipsis .overlay:before { 
 
    content: ""; 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 

 
    /** 
 
    background: lightgreen; 
 
    /**/ 
 
} 
 
.ellipsis .placeholder { 
 
    float: left; 
 
    width: 50%; 
 
    height: 40px;/* h*n */ 
 

 
    /** 
 
    background: lightblue; 
 
    /**/ 
 
} 
 
.ellipsis .more { 
 
    position: relative; 
 
    top: -20px;/* -h */ 
 
    left: -50px;/* -w */ 
 
    float: left; 
 
    color: #000; 
 
    width: 50px;/* width of the .more w */ 
 
    height: 20px;/* h */ 
 
    font-size: 14px; 
 

 
    /** 
 
    top: 0; 
 
    left: 0; 
 
    background: orange; 
 
    /**/ 
 
}

<div class='ellipsis'> 
 
    <div class='content'> 
 
     <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> 
 
     <div class='overlay'> 
 
      <div class='placeholder'></div> 
 
      <div class='more'>...<a href="http://hai.li">more</a></div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2017-02-12 04:23:56 Defims

很好，但只适用于webkit浏览器。所以不能用于生产。 – Teetrinker 2017-10-19 13:45:25

包含“更多”链接的CSS文本省略号

回答

相关问题