Menu
I'm trying to align a text next to an icon inside a card. The card is wrapped inside the Bootstrap "col" class which dynamically determines its size depending on how many items a row contains.
However if there isn't enough space the text gets wrapped and is displayed in a second row. Now what I'm trying to achieve is to keep the text next to the icon on one line and end it if there isn't enough space with an ellipsis (three dots).
This plunker shows my current setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to achieve
859
Approach 1: To hide overflown text as ellipsis using CSS properties. Then add its select to element of class col and wrap it within div tag. We can also use d-flex instead of row. Example 1: Below program illustrates how to hide overflown text as ellipsis using dynamic bootstrap cols using CSS properties and Flex.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
We can solve this problem by using CSS overflow property. overflow: hidden; hidden – The overflow is clipped, and the rest of the content will be invisible.
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
An idea is to make your text out of the flow using absolute position and then add some CSS properties to crop the text:
.main-title {
flex: 1;
position: relative;
}
.main-title .title {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row d-flex">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
