I have been searching for a way to truncate long text into a single line in bootstrap 4. I have come across several solutions on Stack Overflow such as Link 1, Link 2, Link 3, but none of them seem to work for me.
Here is the text I am dealing with:
https://i.sstatic.net/WbJyA.jpg
This is the desired output:
https://i.sstatic.net/Snic2.jpg
However, when I implement the following code, the text does not truncate into a single line, and the table line protrudes slightly:
https://i.sstatic.net/9AKR1.jpg
Here is the code snippet I am using:
<div class="row">
<div class="font-14">
<table id="userLogTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">LOG LIST</th>
<th class="text-center">DETAIL</th>
</tr>
</thead>
</table>
</div>
</div>
columns: [
{ data : "id", "className": "text-center" },
{ data : "log_info", "className": "text-log" },
{ data : "log_id", "className": "text-center",
render: function(data) {
return "...";
}
}
],
.text-log {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* number of lines to show */
-webkit-box-orient: vertical;
}