Bootstrap Snippet Text lines (without white-space : nowrap) size (length) Javascript using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div id="dash">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Proin nisi ligula, dapibus a volutpat sit amet, 
            mattis et dui. Nunc porttitor accumsan orci id luctus. 
            Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. 
            Nam sed ipsum a urna acquam.</p>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}
#dash p {
  padding: 10px;
  margin: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text lines (without white-space : nowrap) size (length) Javascript"
Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Text lines (without white-space : nowrap) size (length) Javascript" Bootstrap 4.1.1 Snippet by blackgirl

Related: See More

Questions / Comments:

"Text lines (without white-space : nowrap) size (length) Javascript"
Bootstrap 4.1.1 Snippet by blackgirl