Question

我遇到div中的自动换行问题。我想做出类似的东西： Link，但我得到了这个：Link。这是我的代码：

＆＃13;

#div-1 {
  height: 28px;
  width: 250px;
  margin-top: 5px;
  border: 1px solid rgb(200,200,200);
}
#span-1 {
  font-size: 18px;
  color: #0066FF;
  line-height: 28px;
  position: absolute;
}

＆＃13;

<div id="div-1">
    <span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>

＆＃13;

你能帮帮我吗？感谢。

Answer 1

您可以将白色空间与溢出结合使用。如果你愿意，文字溢出。请参阅下面的示例。

＆＃13;

    #div-1 {
      height: 28px;
      width: 250px;
      margin-top: 5px;
      border: 1px solid rgb(200,200,200);
      
      font-size: 18px;
      color: #0066FF;
      line-height: 28px;
     
      /* Does the magic */
      overflow :hidden;
      white-space: nowrap;
      
      text-overflow: ellipsis; /* Adds the ... */
    }

＆＃13;

    <div id="div-1">
        SomeTextSomeTextSomeTextSomeTextSomeText
    </div>

＆＃13;

Answer 2

从position: absolute移除#span-1并为overflow-x: hidden;添加#div-1。您还可以使用 text-overflow: ellipsis; 添加...如果文本溢出。

#div-1 {
  height: 28px;
  width: 250px;
  margin-top: 5px;
  border: 1px solid rgb(200,200,200);
  overflow-x: hidden;
}
#span-1 {
  font-size: 18px;
  color: #0066FF;
  line-height: 28px;
}

<div id="div-1">
    <span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>

Answer 3

将overflow属性添加到div样式：

#div-1 {
  overflow: hidden;
}

希望有所帮助。

Answer 4

试试这个

make＃div-1 position：relative并添加overflow：hidden属性。

CSS

#div-1 {
  height: 28px;
  width: 250px;
  margin-top: 5px;
  border: 1px solid rgb(200,200,200);
  overflow:hidden;
  position: relative;
}
#span-1 {
  font-size: 18px;
  color: #0066FF;
  line-height: 28px;
  position: absolute;
}

HTML

<div id="div-1">
    <span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>

希望这会有所帮助..

Answer 5

#div-1 {
  height: 28px;
  width: 250px;
  margin-top: 5px;
  border: 1px solid rgb(200,200,200);
  overflow:hidden;
}
#span-1 {
  font-size: 18px;
  color: #0066FF;
  line-height: 28px;
}

<div id="div-1">
    <span id="span-1"> SomeTextSomeTextSomeTextSomeTextSomeText </span>
</div>

Answer 6

添加：自动换行：断字；

使div外的文本不可见

6 个答案: