how to attach an arrow at the end of ellipsis dots

Question

How do I place the arrow icon at the end of the ellipsis dots?

The arrow icon is on the next line while I want it to be on the same line. Here is my code

https://codepen.io/ramizafzalkhan/pen/bGNaJXm

div {
width: 300px;
height: 65px;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}
.fa{
display: -webkit-box;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<div>
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit
  amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat .

</div>
<i class="fas fa-arrow-right"></i>

You need to show some code here on StackOverflow. – ssc-hrep3 Jan 07 '20 at 06:36 — ssc-hrep3, Jan 07 '20 at 06:36

score 3 · Answer 1 · edited Jan 07 '20 at 06:55

p {
  width: 300px;
  height: 65px;
  line-height: 1.4em;
  display: flex;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fa {
  display: -webkit-box;
  float: right;
  margin-top: -2em;
}

div {
  width: 325px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<div>
  <p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat .

  </p>
  <i class="fa fa-arrow-right"></i>
</div>

solution worked.. with some changes, thanks for the help..... — Ramiz Khan, Jan 07 '20 at 08:01

score 1 · Answer 2 · answered Jan 07 '20 at 08:54

you have not used proper CSS, look into below code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <title>StackOver flow</title>
    <style>
        .main {
            display: flex;
            align-items: center;
        }

        .main p {
            width: 300px;
            height: auto;
            line-height: 1.0em;
            font-size: 1.0em;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .main span {
            display: inline-block;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum
            dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat .</p><span><i class="fas fa-arrow-right"></i></span>
    </div>

</body>

</html>

DEMO

score 0 · Answer 3 · answered Jan 07 '20 at 06:49

you have placed the font-awesome's arrow icon outside of your div, that is why it appearing on the next line. The <div> tag is a block element, and everything outside of it will not be in line with the <div>. If you shift your <i> tag inside the <div>...</div>, then you will get the following.

There is still no arrow icon here, and that is because of your CSS file. You have restricted the <div> to be of 300px in width and 65px in height. If you change them both to 100%, you will get the following result.

You can play around with CSS to more fine-tune it. Have a look at my codepen for it.

how to attach an arrow at the end of ellipsis dots

3 Answers3