How to truncate long text to be into 1 line in bootstrap 4

Question

I want to truncate some long text into a single line in bootstrap 4, I have read many solutions here such as Link 1, Link 2, Link 3 but they were not helpful.

The text I have:

This is how I want it to look:

But this happened with the code as shown below, the table line protrudes outwards a bit, and the text is not in a single line.

Here is my code:

     <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;
}

Can you create a snippet or code-pen please – Awais Dec 26 '19 at 07:11 — Awais, Dec 26 '19 at 07:11
Try adding `white-space: nowrap` in your css – Ankita Kuchhadiya Dec 26 '19 at 07:11 — Ankita Kuchhadiya, Dec 26 '19 at 07:11

hR 312 · Answer 1 · 2019-12-26T07:19:03.910

2

Fix the height of the row and make overflow:scroll. This must work.

ATTR{
  font-size:12px;
  line-height:15px;
  height:30px;
  width:100%;
  overflow:scroll;
  white-space: nowrap;
}

ATTR::-webkit-scrollbar {
    display: none;
}

ATTR {
    -ms-overflow-style: none;
}

edited Dec 26 '19 at 07:19

answered Dec 26 '19 at 07:12

hR 312

824
1
9
22

normally for make only 1 line, what is the exact height number? – mastersuse Dec 26 '19 at 07:15
what's the issue that you are facing with this solution – hR 312 Dec 26 '19 at 07:30
Take a look on this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll – hR 312 Dec 26 '19 at 07:31
I don't want use a scroll bar, as you can see I have put "notepad" icon at the right, that will show full log when clicked. – mastersuse Dec 26 '19 at 07:34
Then keep `overflow:hidden` and change the height to fit the text on click – hR 312 Dec 26 '19 at 07:37

score 1 · Answer 2 · answered Dec 26 '19 at 13:01

1

Your code is perfect just use

td.text-log {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  -webkit-box-orient: vertical;
}

answered Dec 26 '19 at 13:01

Mohammed Yousuff

122
1
1
9

score 0 · Answer 3 · answered Dec 26 '19 at 08:13

0

You simply can use just these lines to truncate the text:

.text-log {
    display: block; //in case if it is not block already 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

answered Dec 26 '19 at 08:13

Anna Chebotar'

1
1

How to truncate long text to be into 1 line in bootstrap 4

3 Answers3