イメージをテキストの横に配置するテキストオーバーフロー：同じ行にブートストラップを使用する省略記号

Question

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> 

そして、ここであなたが最初のdivに追加することができ、コードhttp://www.bootply.com/P0lbiPhLDo

Answer 1

です：

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

スニペット：

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

一方、第2のdivのために

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