Make text outside div invisible

Question

I have got problem with word wrapping in div. I am trying to make something like that: Link, but i have got this: Link. This is my code:

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

Can you help me? Thanks.

Answer 1

You can use white-space in combination with overflow. And text-overflow if you like. See the example below.

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