2

我正在尝试将段落文本放入div其中并以单行显示。如果文本长于指定宽度，则不应转到第二行（div 之外）。我尝试了 CSS 中的所有内容，使用过text-overflow但white-space没有任何成功。这是我的html的一部分：

   <li>
    <a href="#" id="searchLink">

        <div id="searchDiv">
            <img id="searchImg" src="" />
            <p id="searchedProductName">
            </p>
        </div>
    </a>
</li>

如果我使用 jQuery 文本在 paragraf 中放置一些较长的文本，则使用 2 行，（超出 div）我的 CSS：

    #searchDiv {
    z-index: 1000;
    width: 600px;
    height: 50px;
    background-color: white;

}
   #searchImg {
    width: 50px;
    height: 50px;
}

#searchedProductName {
     text-overflow: ellipsis; /* will make [...] at the end */
width: 370px; /* change to your preferences */
white-space: nowrap; /* paragraph to one line */
overflow:hidden; /* older browsers */
}

我用新更新的 CSS 解决了显示行的问题，但 paragragh 仍然超出div.

4

2 回答 2

0

放

overflow: hidden;

在 SearchDiv 中

于 2013-04-18T23:08:13.453 回答
0

添加float:left到您的图像和display:inline-block容器 div。

#searchDiv {
  z-index: 1000;
  width: 600px;
  height: 50px;
  display:inline-block;
}
#searchImg {
  width: 50px;
  height: 50px;
  float:left;
}

JS 小提琴演示

于 2013-04-18T23:13:09.530 回答