如何在省略号的末尾附加箭头答案

【问题标题】：how to attach an arrow at the end of ellipsis dots如何在省略号的末尾附加箭头
【发布时间】：2020-04-24 15:44:35
【问题描述】：

如何将箭头图标放在省略号的末尾？

箭头图标位于下一行，而我希望它位于同一行。这是我的代码

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>

【问题讨论】：

你需要在 StackOverflow 上显示一些代码。

标签： html css ellipsis

【解决方案1】：

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>

【讨论】：

解决方案有效..有一些变化，感谢您的帮助.....
如果解决方案有助于将其标记为答案，欢迎您

【解决方案2】：

您没有使用正确的 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

【讨论】：

【解决方案3】：

您已将 font-awesome 的箭头图标放置在您的 div 之外，这就是它出现在下一行的原因。 <div>标签是一个块元素，它之外的一切都不会和<div>一致。如果您将<i> 标签移到<div>...</div> 内，您将得到以下信息。

这里仍然没有箭头图标，那是因为您的 CSS 文件。您已将<div> 限制为width 中的300 像素和height 中的65 像素。如果将它们都更改为 100%，则会得到以下结果。

您可以使用 CSS 对其进行更多微调。看看我的codepen。

【讨论】：