Make text outside the div invisible

Question

I have a problem wrapping words in a div. I am trying to do something like this: Link , but I have 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>

Run codeHide result

Could you help me? Thank.

Answer 1

You can use white space in combination with overflow. And text overflow if you want. 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>

Run codeHide result

Answer 2

Remove position: absolutefrom #span-1and add overflow-x: hidden;for #div-1. You can also use one that adds ... if the text overflows. 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>

Run codeHide result

Answer 3

overflow div:

#div-1 {
  overflow: hidden;
}

, .

Answer 4

# div-1 position: relative : .

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>

Run codeHide result