как прикрепить стрелку в конце многоточия - PullRequest
Новая
       10

как прикрепить стрелку в конце многоточия

0 голосов
/ 07 января 2020

Как разместить значок стрелки в конце многоточия?

Значок стрелки находится на следующей строке, а я хочу, чтобы он находился на той же строке. Вот мой код

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>

Ответы [ 3 ]

2 голосов
/ 07 января 2020

вы не использовали правильный CSS, посмотрите код ниже. 

<!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

2 голосов
/ 07 января 2020 

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>
0 голосов
/ 07 января 2020

Вы поместили значок стрелки font-awesome за пределами вашего div, поэтому он появился на следующей строке. Тег <div> является блочным элементом, и все, что находится за его пределами, не будет соответствовать <div>. Если вы сдвинете тег <i> внутри <div>...</div>, вы получите следующее:

enter image description here

Здесь все еще нет значка стрелки, и это из-за вашего CSS файла. Вы ограничили <div> 300 пикселями в width и 65px в height. Если вы измените их на 100%, вы получите следующий результат.

enter image description here

Вы можете поиграть с CSS для более точной настройки Это. Посмотрите на мой кодекс .

...