文本始終在圖像的右側對齊，並在左邊距相同

Question

我旁邊有一張圖片和一些文字。 當文本太長時，所有文本將在圖像下方移動。 無論文本有多長，如何使文本始終始終與圖像右邊對齊。 並且文本總是在行與行之間整齊地留有邊距（=並非最后幾行在圖像下方移動。這有可能實現嗎？

附小提琴... 小提琴

這是我的代碼：

 <div class="car">
      <div class="image">
          <img alt="" src="http://placehold.it/50x50&text=CAR" />
      </div>
      <div class="makeAndModel">
            <div class="brand">
                Mercedes
            </div>          
            <div class="model">
                W126000000000000000000000000000000000000000000000000000000000000000000000000
            </div>
     </div>
</div>

CSS：

.car {
    display:block;
}

.car .image {    
    margin:0;
    display:inline-block;
    vertical-align:middle;
}
.car .image img {
    max-width:100%;
    max-height:100%;
}

.car .makeAndModel {
    margin:0 0 0 5px;
    font-family:'Droid Serif';
    display:inline-block;
    vertical-align:middle;
}

.brand {
    font-size:16px;
    color:#333333;
    font-weight:bold;
    display:block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-style:normal;
    display:block;
}

Answer 1

添加此樣式：

.car {
  white-space: nowrap;
}

您也可以刪除display: block; 屬於car類，因為div是默認樣式。

小提琴

Answer 2

添加white-space:no-wrap; 在課堂上

.car {
    display:block;
     white-space: nowrap;
}

演示： FIDDLE

更新

根據您的圖像，設置覆蓋圖像和文本的div寬度。

更新-1

我想我為您找到了解決方案，

這是我的JSFIDDLE-UPDATE

您必須使用word-wrap: break-word;

Answer 3

使用表單元格，您可以將容器分成幾列，如下所示：

.car {
    display:table;
}

.car .image {    
    margin:0;
    display: table-cell;
    vertical-align:middle;
}
.car .image img {
    max-width:100%;
    max-height:100%;
    min-width: 50px;
    height: auto;
}

.car .makeAndModel {
    margin:0 0 0 5px;
    font-family:'Droid Serif';
    display:table-cell;
    vertical-align:middle;
}

.brand {
    font-size:16px;
    color:#333333;
    font-weight:bold;
    display:block;
}

.model {
    font-size:12px;
    color:#5A5A5A;
    font-style:normal;
    display:block;
}

http://jsfiddle.net/1mb2Lvc4/1/

Answer 4

我們只能做的就是在特定長度后使用“ ...”

.model{width: 420px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

沒有其他事情可以做