使 div 之外的文本不可见

Question

我在 div 中遇到了自动换行问题。我正在尝试做这样的事情： Link, but i have got this: Link。这是我的代码：

#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;
}

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

你能帮帮我吗？谢谢

Answer 1

从 #span-1 中删除 position: absolute 并为 #div-1 添加 overflow-x: hidden;。您还可以使用 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 2

可以结合使用white-space和overflow。如果你愿意，还有文本溢出。请参阅下面的示例。

    #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 ... */
    }

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

Answer 3

将 overflow 属性添加到您的 div 样式：

#div-1 {
  overflow: hidden;
}

希望对您有所帮助。

Answer 4

试试这个

制作#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

添加： word-wrap: break-word;

使 div 之外的文本不可见

Make text outside div invisible

html

css

word-wrap