Applying ellipsis in NewsFeed Content

Introduction

As all we know we have NewsFeed webpart to display our activities in Mysite. The NewsFeed contents are not applied with ellipsis style. So, the content height will get enlarge automatically. Here, i am going to share an idea to apply ellipsis for content.

NewsFeed Webpart

First, We need to place the newsfeed webpart in our page. The method is our choice whether it may be applied directly or programmatically. If you need to go with programmatically, Click here. 

Cutomization

Customization will differ based on way we chose to place the webpart directly / programmatically in the page. Let we see both customization here.

Directly

First place the Newsfeed webpart in sitepage. Then, upload the jquery library in Site Assets. 

Add ScriptEditor in the page. Open the ScriptEditor and place the below script.

<script type='text/javascript' src="/SiteAssets/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function ($) {
$('.ms-microfeed-replyText span').addClass('replyEllipsis');

 $(.ms-microfeed-replyText span').click(function () {
        if ($(this).hasClass('replyEllipsis')) {
            $(this).removeClass('replyEllipsis')
        }
        else {
            $(this).addClass('replyEllipsis')
        }

    });
});
</script>

CSS for replyEllipsis

<style> .replyEllipsis {
    width:250px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>

Here, I did code for ellipsis for reply text in Newsfeed. I have found <div> tag of reply container, they form <span> for reply text. I am getting <span> and added new class in it. Already made css for that class (replyEllipsis). The jquery has added the class in <span> tag at page load. And i did toggle type of code to apply ellipsis for reply text (ON/OFF).

Programmatically

Add the <script> in the sitepage and paste the above script. Deploy the solution. The Ellipsis will apply in Newsfeed webpart.