0

Best illustrated with a simple code example:

.container {
  width: 100px;
  background: #f00;
  white-space: nowrap;
  font-size: 30px;
  height: 20px;
  overflow-x: visible;
  overflow-y: hidden;
}
<div class="container">gggg gggg gggg gggg</div>

I am using properties:

overflow-x: visible;
overflow-y: hidden;

and hoping that the text that goes horizontally outside of the container will be hidden, but the text/characters that span vertically will remain visible.

To clarify the use case:

I want to restrict container width and height. The overflowing text needs to be cut-off.

This can be done with simple overflow: hidden; and text-wrap: word-wrap;. The problem is that certain font characters vertically overflow outside of the line-height/container height, e.g.

enter image description here

Notice the "g" and "y" letters.

enter image description here

Therefore, my plan is no set white-space: nowrap and somehow force to allow only vertical overflow visibility. This causes two problems:

  • It appears that I cannot have different visibility values for overflow-x/overflow-y.
  • I cannot use text-wrap with white-space: nowrap
Gajus
  • 69,002
  • 70
  • 275
  • 438
  • I tried something like this a while ago and i remember that if found out that you can't give overflow-x and overflow-y different values. But i might be wrong http://stackoverflow.com/questions/11685039/overflow-x-overwritten-by-overflow-y – Mattia Nocerino Oct 29 '15 at 11:06
  • You can give them different values, but not hidden on one and visible on the other. – Bill Oct 29 '15 at 11:30
  • Feels like an XY problem. – Paulie_D Oct 29 '15 at 11:33

1 Answers1

-1

I think the code works if you increase the container height. so say:

.container {
  width: 100px;
  background: #f00;
  white-space: nowrap;
  font-size: 30px;
  height: 40px;
  overflow-x: visible;
  overflow-y: hidden; 
  }

play around with the white-space: wrap; and white-space: nowrap; to get desired result.

NEbere
  • 1