使div外的文本不可见

Question

我在div中有自动换行的问题.我想做出类似的东西: 链接,但我有这个:链接.这是我的代码:

#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

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

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