CODEWITHSUNDEEP
htmlcss
user1853517
user1853517

Reputation:

overflow working with display inline

Overflow doesn't appear to be working when I use display: inline. I need to have the text inline, because it's something that appears at the top right of the webpage with "Hello," in front of it and a drop down arrow behind the name. If I remove the display: inline, the overflow works, but then the word in front and the image behind the name drops to a new row. I tried using inline-block, but that causes the text to actually wrap, though it's hidden, the name looks like I superscript it.

example

How can I make this work property?

div.actualName {
  display: inline;
  width: 40px;
  height: 20px;
  overflow: hidden;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>

Upvotes: 0

Views: 46

Answers (2)

Jarrall Barnett
Jarrall Barnett

Reputation: 81

Using a styled span might be more useful in this particular example versus applying a div and class to style a few words in your line of text. Spans are more similar to in-line elements while divs are more like block elements. Let me know if it helps! Good luck.

Upvotes: 0

j08691
j08691

Reputation: 207919

Use inline-block but add the vertical-align:top rule. The default vertical alignment for inline elements is baseline.

div.actualName {
  display: inline-block;
  width: 40px;
  height: 20px;
  overflow: hidden;
  vertical-align:top;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>

Upvotes: 1

Related Questions