使 div 外的文本不可见答案

【问题标题】：Make text outside div invisible使 div 外的文本不可见
【发布时间】：2017-07-13 12:12:55
【问题描述】：

我遇到了在 div 中换行的问题。我正在尝试做这样的事情： Link，但我有这个：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>

你能帮帮我吗？谢谢。

【问题讨论】：

标签： html css word-wrap

【解决方案1】：

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

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

【讨论】：

谢谢。这是最好的选择

【解决方案2】：

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

#div-1 {
  overflow: hidden;
}

希望对您有所帮助。

【讨论】：

【解决方案3】：

从#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>

【讨论】：

【解决方案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>

希望这会有所帮助..

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

添加这个： word-wrap: 断字；

【讨论】：