MelangeCSS Reference

Current Version: 1.0.0-RC5

Overflow

Setting overflow and trunaction behavior is a key technique in producing defensive designs, especially when small-screened devices require support

Properties

Overflow
overflow*
Overflow Both Directions
overflow-visible 
.overflow-visible {
  overflow: visible;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-scroll 
.overflow-scroll {
  overflow: scroll;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-hidden 
.overflow-hidden {
  overflow: hidden;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-clip 
.overflow-clip {
  overflow: clip;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-auto 
.overflow-auto {
  overflow: auto;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-x*
Overflow Horizontally
overflow-x-visible 
.overflow-x-visible {
  overflow-x: visible;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-x-scroll 
.overflow-x-scroll {
  overflow-x: scroll;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-x-hidden 
.overflow-x-hidden {
  overflow-x: hidden;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-x-clip 
.overflow-x-clip {
  overflow-x: clip;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-x-auto 
.overflow-x-auto {
  overflow-x: auto;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-y*
Overflow Vertically
overflow-y-visible 
.overflow-y-visible {
  overflow-y: visible;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-y-scroll 
.overflow-y-scroll {
  overflow-y: scroll;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-y-hidden 
.overflow-y-hidden {
  overflow-y: hidden;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-y-clip 
.overflow-y-clip {
  overflow-y: clip;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
overflow-y-auto 
.overflow-y-auto {
  overflow-y: auto;
}
While the spice must flow, if it were to overflow, it would be lost to the sands of Arrakis. This cannot be allowed.
Truncate

Truncate sets the text-overflow property only. Text will not truncate unless it is overlfowing its container, thus truncate and clip will not force truncation. They only allow you to control what happens when truncation occurs.

truncate 
.truncate {
  text-overflow: ellipsis;
}
The spice must flow!
clip 
.clip {
  text-overflow: clip;
}
The spice must flow!