People directory: cut off about me text | Community Development | Sandbox ConnAct

The solution which I can think of just with CSS could be this:

.people-directory-aboutme {
    overflow: hidden;
    position: relative;
    max-height: 80px;
}

Modified the "People directory incl about me" to have 

<div class="ax-pr-field ax-pr-field-over-mij people-directory-aboutme">{{../Resources.PeopleAboutText}}: {{{field:About me}}}</div>

Added that in CSS in CSS Overrides to make the screen look like this:

I could have gone with -webkit-line-clamp but that one has some issues with Safari.

IN order to create cut oof at xx words we did following:

To implement what you suggested we should go with JS way:

Let's change the CSS to 

.people-directory-aboutme {
    display: none;
}

and add JS to that "People directory incl about me" template (I have already made the change):

https://dutchmobilityinnovations.com/admin/uibuilder/templates

    <script>
        $('.people-directory .people-directory-aboutme').map(function() {
            var input = this.innerHTML;
            this.innerHTML = input.length > 250 ? `${input.substring(0, 250 )}...` : input;
            this.style.display = 'block'
        });
    </script>

You can change the 250 character length in that script based on your needs.

Modified that script further to shorten string without cutting words at the end:

    <script>
        $('.people-directory .people-directory-aboutme').map(function() {
            var input = this.innerHTML;
            if(input.length > 250){
                let trimmedString = input.substring(0, 250 );
                trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
                trimmedString = `${trimmedString} ...`;
                this.innerHTML = trimmedString;
            }
            this.style.display = 'block'
        });
    </script>