Question

我正在尝试将段落文本放在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之外。

Answer 1

把

overflow: hidden;

SearchDiv中的

Answer 2

将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 Fiddle Demo

如何将div中的段放在一行中？

2 个答案: