用圖像和長文本

Question

我試圖創建引導一個下拉菜單，使用圖像和長文本引導下拉菜單中，可能要自動換行到成爲500像素

我試過的寬度內這樣的建議：

.dropdown-menu { 
    width: 500px; 
    white-space: normal; 
} 

這裏是我的小提琴： http://jsfiddle.net/azu0zwrr/

任何想法？

Answer 1

嘗試添加：

overflow: hidden; 

---

.dropdown-menu li{ 
 
    width: 500px; white-space: normal;overflow: hidden; 
 
} 
 
.img-thumbnail { 
 
    width:75px;height:75px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script> 
 
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div class="btn-group"><button aria-expanded="true" data-toggle="dropdown" class="btn btn-primary btn-lg dropdown-toggle" type="button">Selecione um produto&nbsp;&nbsp;&nbsp;<b class="caret"></b></button><ul class="dropdown-menu"><li><a><img class="img-thumbnail hidden-xs" src="http://www.extra-imagens.com.br/Control/ArquivoExibir.aspx?IdArquivo=107393037">&nbsp;&nbsp;Tablet Multilaser ML Supra Quad Core com Tela 7」, 8GB, Wi-Fi, Android 4.4, Suporte à Modem 3G e Processador Quad Core - Rosa</a></li><li><a><img class="img-thumbnail hidden-xs" src="http://www.extra-imagens.com.br/Control/ArquivoExibir.aspx?IdArquivo=107392987">&nbsp;&nbsp;Tablet Multilaser ML Supra Quad Core com Tela 7」, 8GB, Wi-Fi, Android 4.4, Suporte à Modem 3G e Processador Quad Core - Branco</a></li></ul></div>

Answer 2

添加到您的CSS：

.dropdown-menu li a { 
word-wrap: break-word; 
white-space: normal; 
} 

小提琴：https://jsfiddle.net/1usvrs3e/

Answer 3

Check this out This should be working for you 

    <li ><a><p style="word-wrap: break-word;" ><img class="img-thumbnail hidden-xs" src="http://www.extra-imagens.com.br/Control/ArquivoExibir.aspx?IdArquivo=107393037">&nbsp;&nbsp;Tablet Multilaser ML Supra Quad Core com Tela 7」, 8GB, Wi-Fi, Android 4.4, Suporte à Modem 3G e Processador Quad Core - RosaaSdad</a></p></li> 

Answer 4

這是你想要的嗎？我將兩個樣式標籤的寬度更改爲自動。
.dropdown-menu { width: auto; white-space: normal; } .img-thumbnail { width:auto;height:75px; }