object.style.textAlignLast = "value"; <'text-align-last'> = auto | start | end | left | right | center | justify | match-parent auto Automatically specified by the user agent.
start Inline-level content is aligned to the start edge of the line box.
end Inline-level content is aligned to the end edge of the line box.
left Inline-level content is aligned to the line left edge of the line box.
right Inline-level content is aligned to the line right edge of the line box.
center Inline-level content is centered within the line box.
justify Text is justified according to the method specified by the text-justify property, in order to exactly fill the line box.
match-parent Behaves the same as inherit except that an inherited value of start or end is interpreted against the parent's direction value and results in a computed value of either left or right.
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: start;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start</p>
<p>start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start start</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: end;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end</p>
<p>end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end end</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: left;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left</p>
<p>left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: right;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</p>
<p>right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: center;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</p>
<p>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: justify;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify</p>
<p>justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
text-align-last: match-parent;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent</p>
<p>match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent match-parent</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(innerHTML)">start</button>
<button onmouseover="myfunction(innerHTML)">end</button>
<button onmouseover="myfunction(innerHTML)">left</button>
<button onmouseover="myfunction(innerHTML)">right</button>
<button onmouseover="myfunction(innerHTML)">center</button>
<button onmouseover="myfunction(innerHTML)">justify</button>
<button onmouseover="myfunction(innerHTML)">match-parent</button>
<p>text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last</p>
<p>text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.textAlignLast = myparameter;
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>start</button>
<button>end</button>
<button>left</button>
<button>right</button>
<button>center</button>
<button>justify</button>
<button>match-parent</button>
<p>text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last</p>
<p>text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last text-align-last</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.textAlignLast = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>