The overflow-inline property for CSS specifies the handling of overflow in the horizontal direction. The mapping depends on the element’s writing-mode.
object.style.overflowInline = "value"; <'overflow-inline'> = <'overflow'> <'overflow'> = [ visible | hidden | clip | scroll | auto ]{1,2} visible There is no special handling of overflow, the box's content is rendered outside the box if positioned there.
hidden The box's content is clipped to its padding box and the UA must not provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by direct intervention of the user.
clip Like hidden, but also forbids scrolling.
scroll Indicates that the content is clipped to the padding box, but can be scrolled into view.
auto Automatically specified by the user agent.
<!doctype html>
<html>
<head>
<style>
blockquote
{
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 150px;
}
cite
{
display: block;
text-align: right;
}
div
{
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-inline: clip;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
blockquote
{
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 150px;
}
cite
{
display: block;
text-align: right;
}
div
{
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-inline: hidden;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
blockquote
{
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 150px;
}
cite
{
display: block;
text-align: right;
}
div
{
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-inline: scroll;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
blockquote
{
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 150px;
}
cite
{
display: block;
text-align: right;
}
div
{
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-inline: visible;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
blockquote
{
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 150px;
}
cite
{
display: block;
text-align: right;
}
div
{
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>clip</button>
<button>hidden</button>
<button>scroll</button>
<button>visible</button>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>Groucho Marx</cite>
</blockquote>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector("div").style.overflowInline = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>