Necesito mostrar el texto de la matriz. Lo hice con ng-repeat y cuando el texto es más grande que 4 líneas, agrego puntos suspensivos y enlace. una fila. Quiero encontrar la manera de hacerlo... la situación ahora Me encantaría que me ayudaras. Se adjunta código html,js
<div class="comment1 aop-ellipssis four"> {{item.description}} </div> <span ng-if="c.isOverflown('comment1',$index)" ng-click="c.openLink(item.sys_id)" class="ag-link" >View More</span> ` function _isOverflown(elem,index){ var element = angular.element('.'+elem)[index]; return element.scrollHeight > element.clientHeight ;} `aquí hay un posible truco promedio , mantenga algo de espacio para ese enlace y colóquelo en una posición absoluta dentro de un padre relativo donde se encuentra el texto para sujetar:
demostración a continuación, que no puede ocultar el enlace motre si el texto está llenando parcialmente la última línea sin puntos suspensivos.
editar: para que coincida con la captura de pantalla que agregó, javascript está ahí para tal trabajo, CSS no ayudará . Dejaré la respuesta aquí solo por curiosidad. :)
div { width: 400px; margin: 1em auto 0; line-height: 1.4; border-top: solid; padding-bottom: 1.4em;/* == line-height */ position: relative; /* for coordonate reference to position the more link */ overflow:hidden;/* hide a if here and too far from top */ } div p { /* text-clipping*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; } div p+a { position: absolute; top: 4.2em;/* == line-height x line-clamp */ right:1rem; background:#bee } <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><a href="#">more</a> </div> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><a href="#">more</a> </div> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet.</p><a href="#">more that should not be seen </a> </div> <div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. </p><a href="#">more</a> </div>