使用文本溢出将图像放置在文本旁边：省略号在同一行上使用引导程序答案

【问题标题】：Placing image next to text with Text-overflow: ellipsis using bootstrap on same line使用文本溢出将图像放置在文本旁边：省略号在同一行上使用引导程序
【发布时间】：2016-12-27 07:47:58
【问题描述】：

我想将text-overflow: ellipsis与引导程序类text-nowrap一起使用，并将图像放在此文本旁边。所以左边的文本和右边的图像在同一行。我尝试了以下方法，但没有奏效。我希望文本和图像在同一行，text-overflow: ellipsis。

<div class="col-lg-6">

    <div class="text-nowrap " style="overflow: hidden; text-overflow: ellipsis; ">
        <a>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing</a>
    </div>

    <div style="float: right">
        <img src="http://www.w3schools.com/html/pic_mountain.jpg" class="img-responsive" style="max-height: 30px;">
    </div>   

</div>

这里是代码http://www.bootply.com/P0lbiPhLDo

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以添加到第一个 div：

position:relative;
display:inline-block;
width:55%;

对于第二个 div：

display:block;
position:relative;
width:40%;

sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="col-lg-6">

  <div class="text-nowrap" style="overflow: hidden; text-overflow: ellipsis;position:relative;display:inline-block;width:55%;">
      <a>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing</a>
    </div>

  <div style="float:right;display:block;position:relative;width:40%;">
        <img src="http://www.w3schools.com/html/pic_mountain.jpg" class="img-responsive" style="max-height: 30px;">
    </div>   

</div>

【讨论】：