css-overflow-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Overflow Module Level 3 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<style>
x-text-overflow {
	display: block;
	width: 3.1em;
	border: solid .1em var(--K-color);
	padding: .2em;
	font-family: Helvetica, sans-serif;
	line-height: 1.1;
	overflow: hidden;
}

svg {
	vertical-align: top;
}
#_overflow-ellipsis-sample {
	min-width: 30em;
	div,
	pre {
		margin:0;
		vertical-align: top;
		padding: 0.5em;
	}
	td {
		vertical-align: top;
	}
}

@supports (grid-template-columns: subgrid) and (display: contents) {

#_overflow-ellipsis-sample {
	grid-template-columns: 1fr 1fr;
	min-width: 20em;
	max-width: 32em;
	tr {
		grid-template-areas:
			"code code"
			"描画 呈示"
		;
		> *:nth-child(1) {
			grid-area: code;
		}
		> *:nth-child(2) {
			grid-area: 描画;
		}
		> *:nth-child(3) {
			grid-area: 呈示;
		}
	}
}

}

</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand,
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	let context_prop = '';
	let context_prop1 = '';

	return this.html.replace(
		/%[\w~一-鿆]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r': // ref
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'p0': // 
	context_prop = `#valdef-${key}-`;
	return '';
case 'p': // property
	if( indicator === '@') {
		context_prop = `#valdef-${key}-`;
	} else {
		context_prop1 = `#valdef-${key}-`;
	}
	break;
case 'pe': 
	text = `::${key}`;
	break;
case 'ps': 
	text = `:${key}`;
	break;
case 't': // typedef
	text = `&lt;${key}&gt;`;
	key = key.replace(/\s*\[.+/, '');
	break;
case 'tp': // property value type
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 'v': // css values
	href = context_prop + key;
	break;
case 'v1':
	href = context_prop1 + key;
	klass = 'v';
	break;
case 'en': // english words
	text = `<span lang="en">${key}</span>`
	break;
case 'issue':
	href = `~CSSissue/${key}`;
	text = `課題 #${key}`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}">＊</a>`;
default:
}


let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}


if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:CSS Overflow Module Level 3
spec_date:2025-03-10
	spec_date:2024-03-24
trans_update:2025-03-18
source_checked:250310
page_state_key:CSS
original_url:https://drafts.csswg.org/css-overflow-3/
	abbr_url:CSSOVERFLOW3
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:css-ux,css
conformance:css
copyright:2025,permissive
trans_1st_pub:2016-06-14


●●class_map
p:property
css:css
pe:pseudo
e:element
v:value
tp:type
t:type

●●tag_map
p:code
pe:code
t:var
tp:var
css:code
e:code
v:code
c:code
V:var
em:em

●●original_id_map

●●mdn_urls
propdef-overflow:CSS/overflow
propdef-overflow-x:CSS/overflow-x
propdef-overflow-y:CSS/overflow-y
propdef-overflow-inline:CSS/overflow-inline
propdef-overflow-block:CSS/overflow-block
propdef-text-overflow:CSS/text-overflow
propdef-scroll-behavior:CSS/scroll-behavior
propdef-scrollbar-gutter:CSS/scrollbar-gutter

●●link_map

	●p
p.overflow:#propdef-overflow
p.overflow-*:#overflow-properties
p.overflow-x:#propdef-overflow-x
p.overflow-y:#propdef-overflow-y
p.overflow-block:#propdef-overflow-block
p.overflow-inline:#propdef-overflow-inline
p.overflow-clip-margin:#propdef-overflow-clip-margin
p.text-overflow:#propdef-text-overflow
p.scroll-behavior:#propdef-scroll-behavior
p.scroll-initial-target:~CSSSCROLLSNAP2#propdef-scroll-initial-target
p.scrollbar-gutter:#propdef-scrollbar-gutter

p.block-ellipsis:~CSSOVERFLOW4#propdef-block-ellipsis
p.continue:~CSSOVERFLOW4#propdef-continue
p.line-clamp:~CSSOVERFLOW4#propdef-line-clamp
p.max-lines:~CSSOVERFLOW4#propdef-max-lines
p.-webkit-line-clamp:~CSSOVERFLOW4#propdef--webkit-line-clamp

p.height:~SIZING#propdef-height
p.max-height:~SIZING#propdef-max-height
p.writing-mode:~CSSWM#propdef-writing-mode

p.border-radius:~CSSBG#propdef-border-radius
p.box-shadow:~CSSBG#propdef-box-shadow
p.clip:~MASKING1#propdef-clip
p.contain:~CSSCONTAIN#propdef-contain
p.direction:~CSSWM#propdef-direction
p.display:~CSSDISP#propdef-display
p.place-content:~CSSALIGN#propdef-place-content
p.text-shadow:~CSSTEXTDOECR#propdef-text-shadow
p.transform-style:~TRANSFORM2#propdef-transform-style
p.visibility:~CSSDISP#propdef-visibility

	●v
t.string:~CSSVAL#string-value
t.length:~CSSVAL#length-value
t.visual-box:~CSSBOX#typedef-visual-box
t.length-percentage:~CSSVAL#typedef-length-percentage

	v.auto:#valdef-overflow-auto
	v.clip:#valdef-overflow-clip
	v.hidden:#valdef-overflow-hidden
	v.scroll:#valdef-overflow-scroll
	v.visible:#valdef-overflow-visible
	v.overlay:#valdef-overflow-overlay

	v.ellipsis:#valdef-block-overflow-ellipsis

	v.clip:#valdef-text-overflow-clip
	v.ellipsis:#valdef-text-overflow-ellipsis

	vt.visual-box:#valdef-overflow-clip-margin-visual-box
	vt.length:#valdef-overflow-clip-margin-length-0

	v.smooth:#valdef-scroll-behavior-smooth
	v.auto:#valdef-scroll-behavior-auto

	v.auto:#valdef-scrollbar-gutter-auto
	v.both-edges:#valdef-scrollbar-gutter-both-edges
	v.stable:#valdef-scrollbar-gutter-stable

	v.hidden:~CSSDISP#valdef-visibility-hidden
	v.collapse:~CSSDISP#valdef-visibility-collapse

e.body:~HEsections#the-body-element
e.html:~HEmetadata#the-html-element

	●用語
~ink~overflow矩形:#ink-overflow-rectangle
~ink~overflow区画:#ink-overflow-region
~ink~overflow:#ink-overflow
~overflow:#overflow
~overflow切取n辺:#overflow-clip-edge
~scroll容器:#scroll-container
~scroll可能な~overflow矩形:#scrollable-overflow-rectangle
~scroll可能な~overflow区画:#scrollable-overflow-region
到達-不能な~scroll可能な~overflow領域:#unreachable-scrollable-overflow-region
負な~scroll可能な~overflow領域:#negative-scrollable-overflow-region
~scroll可能な~overflow:#scrollable-overflow
~scroll可能な値:#scrollable-overflow-value
~scroll不能な値:#non-scrollable-overflow-value
~scrollport:#scrollport
~scroll位置:#scroll-position
初期~scroll位置:#initial-scroll-position
~scroll~offset:#scroll-offset
~scroll原点:#scroll-origin
~scroll原点~位置:#scroll-origin-position

最も近い~scrollport:#nearest-scrollport
古典~scrollbar:#classic-scrollbars
上層~scrollbar:#overlay-scrollbars
~scrollbar側溝:#scrollbar-gutter

省略符:#_ellipsis-etc

塊~overflow省略符:~CSSOVERFLOW4#block-overflow-ellipsis

	●外部（CSS

算出d値:~CASCADE#computed-value
使用~値:~CASCADE#used-value
略式~prop:~CASCADE#shorthand-property
~UA~stylesheet:~CASCADE#cascade-origin-ua
旧来の別名~値:~CASCADE#css-legacy-value-alias

塊~box:~CSSDISP#block-box
独立な整形~文脈を確立-:~CSSDISP#establish-an-independent-formatting-context
包含塊の連鎖:~CSSDISP#containing-block-chain
初期~包含塊:~CSSDISP#initial-containing-block
行内~level:~CSSDISP#inline-level
行内~内容:~CSSDISP#inline-level
~flow内:~CSSDISP#in-flow
~flow外:~CSSDISP#out-of-flow
置換され:~CSSDISP#replaced-element
塊~容器:~CSSDISP#block-container
根~要素:~CSSDISP#root-element
不可分な行内~level:~CSSDISP#atomic-inline
	不可分な行内~level:~CSS2J#inline-boxes

内容~辺:~CSSBOX#content-edge
~padding辺:~CSSBOX#padding-edge
~border辺:~CSSBOX#border-edge
~margin辺:~CSSBOX#margin-edge

内容~box:~CSSBOX#content-box
~padding~box:~CSSBOX#padding-box
~padding:~CSSBOX#padding
~border~box:~CSSBOX#border-box
	~margin~box:~CSSBOX#margin-box
内容~区画:~CSSBOX#content-area
	~padding区画:~CSSBOX#padding-area
~border区画:~CSSBOX#border-area
~margin区画:~CSSBOX#margin-area

内容~分布:~CSSALIGN#content-distribute
内容-分布~prop:~CSSALIGN#content-distribution-properties
整列~subject:~CSSALIGN#alignment-subject
基底線~整列:~CSSALIGN#baseline-alignment

角括弧付き範囲~記法:~CSSVAL#css-bracketed-range-notation

行l~box:~CSSINLINE#line-box

有位置:~CSSPOS#positioned-box
	~CSS2visuren#positioned-element
絶対的に位置され:~CSSPOS#absolute-position

論理-~prop~group:~CSSLOGICAL#logical-property-group

終端:~CSSWM#css-end
塊-始端:~CSSWM#block-start
塊-終端:~CSSWM#block-end
行内-始端:~CSSWM#inline-start
行内-終端:~CSSWM#inline-end
塊-軸:~CSSWM#block-axis
行内-軸:~CSSWM#inline-axis
行内~size:~CSSWM#inline-size
行内~次元:~CSSWM#inline-dimension
	行内~基底~方向:~CSSWM#inline-base-direction
首要な書字~mode:~CSSWM#principal-writing-mode
書字~mode:~CSSWM#writing-mode
双方向性:~CSSWM#bidirectionality

背景~位置決め区画:~CSSBG#background-positioning-area
背景~塗ng区画:~CSSBG#background-painting-area
外影:~CSSBG#box-shadow-outer-box-shadow
拡幅~距離:~CSSBG#box-shadow-spread-distance

~3D描画~文脈:~TRANSFORM2#3d-rendering-context
外形線:~CSSUI#outline-props

~flex容器:~CSSFLEX#flex-container
~flex駒:~CSSFLEX#flex-item
主-始端:~CSSFLEX#main-start
交叉-始端:~CSSFLEX#cross-start

格子~容器:~CSSGRID#grid-container
格子~駒:~CSSGRID#grid-item

塗り封込め:~CSSCONTAIN#paint-containment
封込め:~CSSCONTAIN#containment

~scroll留ng:~CSSSCROLLSNAP#scroll-snap

~paged媒体:~MQ5#paged-media
~canvas:~CSScommon#canvas
	~canvas:~SVGcoords#TermCanvas

	●外部（他
	表示域:https://w3c.github.io/epub-specs/epub33/core/#dfn-viewport

●●words_table1

CSSSCROLLSNAP2:https://drafts.csswg.org/css-scroll-snap-2/

U2026: <span class="code-point">U+2026</span> 
HTMLintro:HTML-introduction-ja.html
PageDown:<kbd><kbd>Page Down</kbd></kbd>

●●words_table

	●幾何
矩形:rectangle::~
側:side::~
横:horizontal::~
縦:vertical::~
隅:corner::~
形状付けら:shapeさ:~
形状付け:shaping:~
形状:shape:~
丸めら:roundさ:~
投影-:project::~
平面:plane::~
重合する:overlapする::重なり合う
拡幅-:extend::~
拡幅量:extent::~
拡幅:spread::~
拡がる:expandする::~
変形:transform::~
限界域:bounds:~
3D:
隣接な:adjacentな:隣接する
面積:area:~
起点:anchor:~

	張り出して:overhanging
	囲む:bound
	右上:top right
	一次元的:1D
	外方への~offset:outsets beyond
	下方:downward
	右方:rightward
	終端へ向かって:endward
	から離れた所:away from
	から離れるに伴い:away from

	●layout
切取n:clip::切り取り
	切取n法:clipping
切取り:clipping::切り取り
切取られ:clipされ::切り取られ
切取らな:clipしな::切り取らな
切取っ:clipし::切り取っ
	切取って:trap
切取る:clipする::切り取る
切抜いた:clipした::切り抜いた
切抜く:clipする::切り抜く
切抜き:clipping::切り抜き
占めら:occupyさ:~
占める:occupyする:~
	~~占める:take-up
収まり:fitし::~
収まる:fitする::~
収める:fitさせる::~
覆う:coverする::~
flex:::
格子:grid::~::グリッド
駒:item:::アイテム
em:
	行l~box:linebox
最小-:min-:~
最大-:max-:~
	~~最小:minimal
内容-:content-::~
	内容~box:content-box
強制d:forced::強制
非強制d:unforced::非強制
分布:distribution::~
	面積 0:zero area／:zero-area
側溝:gutter::~
供与:contribution::~
主-:main-::~
交叉-:cross-::~

	配置-:placement
	割り当てられ:allotted
	~~背後に押し込まれる:tucked underneath
	内在的に:intrinsically
	より小さい:smaller
	~page割り:paginate

	●塗り
塗ng:painting:塗り
塗り:paint:~
塗る:paintする:~
塗られ:paintされ:~
ink::::インク
影:shadow::~
外影:outer box-shadow::~
ボカシ:blur::ぼかし
打抜き:knockout::打ち抜き
背後:behind:~
遮らな:obscureしな:~
上層:overlay::~::オーバーレイ
描かれ:drawされ:~

	●CSS
装飾:decoration::~
外形線:outline::~
首要:principal::主要
書字:writing::~
発話:speech::~
封込め:containment::封じ込め
浮動-:float::~

	可視でない:invisible
	~style付け:styling
	ascender:::アセンダ
	descender:::ディセンダ
	媒体:medium
	~boxを生成しない:boxless
	下位prop:longhand
	初期~包含塊:the ICB

	●UI
scrollport::::スクロール域
scrolling::::スクロール操作
	~scrolling:scrolling operation
	~scroll用／~scroll法:scrolling
	~scroll可能な:scrollable
pan::::パン
	~pan用のそれ:panner
	~flow内:in-flow
touch::::タッチ
	~touch~screen:touchscreen
	~touch~screen:touch screen
drag::::ドラッグ
wheel::::ホイール
	~mouse~wheelによる~scrolling:mouse scrolling wheel
滑らか:smooth::~
	滑らかに:smooth fashion
瞬時:instant::~
	瞬時に:instant fashion
留ng:snapping::留め::スナッピング
操作o:operation:操作
	~~速度と~~動き:timing function over a user-agent-defined period of time
toolbar::::ツールバー
swipe::::スワイプ

	●仕様
de-facto::事実上の標準
理論的:theoretical:~
安定的:stable:~
安定:stable:~
	安定~化:stabilize
可能性:possibility:~
放棄-:abandon:~
究明-:investigate:~
決着-:settle:~
尊重-:respect:~
規定-:dictate:~
誤記:typo:~
注力-:focus:~
問い:question:~
不整合:inconsistency:~
再現-:reproduce:~
欠如:lack:~
責務:responsibility:~
合意-:agree:~
満足な:satisfactoryな:~
人間工学上の:ergonomicな:~
希望-:hope:~
採用-:adopt:~
究明:investigation:~
会合:meeting:~
誤り:error:~

	著作-時の:authoring
	依存-:is dependent on
	依存するもの:dependency
	制限-法:limiting
	Level
	compat
	~web互換:web-compatible
	特能:fun things
	脳内:mental:
	こっそり:surreptitious
	常に可能とは限らない:not always the case
	されているが:despite
	およそ:likely
	必要-:need
	不要な:not 〜 necessary
	足る:sufficient
	長い間:long-standing
	整合しない:inconsistent
	-:in favor of
	足るものに:sufficiently
	今の所、For the time being
	語:word
	するためには:in order to
	分類:classifier／classify
	第三の類:Category 3
	かのように:similar
	確か:sure
	-:Make sure
	-:we
	それまでは:meanwhile
	足る:sufficiently
	きちんと:well-
	影響されない:unaffected
	:indication
	挙動:behave
	-:provided
	可能になる:allow
	どのような〜できない:forbid 〜 entirely, through any
	し続ける:continues to
	分類:classifier／classify
	つけ込んで:exploit
	他にない:became 〜 merely as a consequence of applying the
	され得る:potential 〜
	working
	seem
	cause
	見れる:can be seen
	為して:made
	標準~化前の:pre-standard
	作業草案:working draft
	~web互換性:web-compat
	込み入って:tricky
	-:predating
	変更されていない:unchanged
	欠いて:lack
	まだ新しい:rather new
	まだ残って:remain open
	利用中の:Your
	すなわち〜には:To the extent that
	〜する所では:To the extent that
	でないとき:in the absence of
	有無:presence
	転じた:it turns out
	原因:caused by
	満たす:satisfy
	~~実際に:indeed
	選ぶこと:choosing
	注記して:noting
	-:equivalency
	際どい:edge
	諸々の:miscellaneous
	整備-:tighten up
	小さな:small
	小さな:minor
	待たれる:pending
	〜ではなく:as opposed to
	これまで:previously
	作業~中:being worked out
	取って代わる:supersede

	●未分類
reader::::リーダ
	視覚系~browser:visual reader
body:
blog-post:blog post::ブログ投稿
和集合:union:~
	同時に:simultaneous
電子本:e-book:~
携帯機:mobile::~::モバイル
双方向性:bidirectionality::~
露呈-:reveal:露わに
公式:formula:~
角括弧付き:bracketed:~

	増やされ:increased
	増える:increase
	Add back
	skipped over
	~access可能:accessible
	一致-:coincide
	happen
	having
	picked up
	plus
	対応-:correspond／:corresponding
	現れ:appear
	ただし:except
	隠し:hide
	消え:disappear
	~~保つ:remain
	出くわすことはなく:will have had no occasion yet to run into
	子孫:descendent
	どこまで:extent
	でも:still
	least
	モノ:things
	長い:long
	2 倍:twice
	-:negative side bearings, or with ascenders/descenders

	●eliipsis
	~UI:interface
	~scroll用の仕組み:scrolling mechanism
swipe-scroll::::スワイプスクロール
touch::::タッチ
dot::::ドット

省略化-:ellipse::~
省略化:ellipsing::~
省略符:ellipsis::~
不可分:atomic::~
中立:neutral::~
代用-:substitute:~
双向:bidi::~
双向性:bidi::~
右横書き:right-to-left::~
基底線:baseline::~::ベースライン
変形n:transformation::変形
折返ng:wrapping::折り返し
書記素:grapheme::~
用字系:script::~
禁則-:prevent:~
編集-:edit:~
部屋:room::~
隠され:hideされ::~
隠した:hideした::~
隠れる:hideする::~
切落す:truncateして:切り落とす
選択-:select::~
選択:selection::~
	配送-法:dispatching
	委ねられる:up to
	高さ（塊~size）:height

	足りない:insufficient


	●指示語
	~~目的の:target
	もっと:further
	更には:furthermore
	各部:parts
	一部:part of
	~~除外:-
	場合によって:sometimes
	themselves
	いくぶん:somewhat
	とは限らない:not all
	全体:wholly
	どちら:whether
	0 以下の:zero or negative
	先立って:prior
	先に来る方:which ever comes sooner
	前:previous
	も:as well
	と同じく:just as
	後の:later
	最終的に:eventually
	これまでに:so far
	反対側の:opposite

●●images
＠css-overflow/
cssisawesome｜height:81px｜｜.svg
cssisaweso｜height:81px｜｜.svg
cssisaw｜height:81px｜｜.svg
nes｜height:114px｜｜.svg
scroll-align-padding｜height:303px｜｜.jpg

●●ref_key_map
CSS3FLEXBOX:CSSFLEXBOX1
CSS3GRIDLAYOUT:CSSGRID1
CSS3TRANSFORMS:CSSTRANSFORMS1

●●ref_normative

[CSS-ALIGN-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Box Alignment Module Level 3＞. URL: https://drafts.csswg.org/css-align/
[CSS-BACKGROUNDS-3]
    Elika Etemad; Brad Kemper. ＜CSS Backgrounds and Borders Module Level 3＞. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-BREAK-4]
    Rossen Atanassov; Elika Etemad. ＜CSS Fragmentation Module Level 4＞. URL: https://drafts.csswg.org/css-break-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-CONTAIN-2]
    Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. ＜CSS Containment Module Level 2＞. URL: https://drafts.csswg.org/css-contain-2/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. URL: https://drafts.csswg.org/css-display/
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-GRID-2]
    Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. ＜CSS Grid Layout Module Level 2＞. URL: https://drafts.csswg.org/css-grid-2/
[CSS-INLINE-3]
    Dave Cramer; Elika Etemad. ＜CSS Inline Layout Module Level 3＞. URL: https://drafts.csswg.org/css-inline-3/
[CSS-LOGICAL-1]
    Rossen Atanassov; Elika Etemad. ＜CSS Logical Properties and Values Level 1＞. URL: https://drafts.csswg.org/css-logical-1/
[CSS-MASKING-1]
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. ＜CSS Masking Module Level 1＞. URL: https://drafts.fxtf.org/css-masking-1/
[CSS-OVERFLOW-4]
    David Baron; Florian Rivoal; Elika Etemad. ＜CSS Overflow Module Level 4＞. URL: https://drafts.csswg.org/css-overflow-4/
[CSS-PSEUDO-4]
    Daniel Glazman; Elika Etemad; Alan Stearns. ＜CSS Pseudo-Elements Module Level 4＞. URL: https://drafts.csswg.org/css-pseudo-4/
[CSS-SCROLL-SNAP-1]
    Matt Rakow; et al. ＜CSS Scroll Snap Module Level 1＞. URL: https://drafts.csswg.org/css-scroll-snap-1/
[CSS-SCROLL-SNAP-2]
    ＜CSS Scroll Snap Module Level 2＞. Editor's Draft. URL: https://drafts.csswg.org/css-scroll-snap-2/
[CSS-TEXT-DECOR-4]
    Elika Etemad; Koji Ishii. ＜CSS Text Decoration Module Level 4＞. URL: https://drafts.csswg.org/css-text-decor-4/
[CSS-TRANSFORMS-2]
    Tab Atkins Jr.; et al. ＜CSS Transforms Module Level 2＞. URL: https://drafts.csswg.org/css-transforms-2/
[CSS-UI-3]
    Tantek Çelik; Florian Rivoal. ＜CSS Basic User Interface Module Level 3 (CSS3 UI)＞. URL: https://drafts.csswg.org/css-ui-3/
[CSS-VALUES-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. URL: https://drafts.csswg.org/css-values-3/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3-FLEXBOX]
    Tab Atkins Jr.; et al. ＜CSS Flexible Box Layout Module Level 1＞. URL: https://drafts.csswg.org/css-flexbox-1/
[CSS3-GRID-LAYOUT]
    Tab Atkins Jr.; et al. ＜CSS Grid Layout Module Level 1＞. URL: https://drafts.csswg.org/css-grid/
[CSS3-TRANSFORMS]
    Simon Fraser; et al. ＜CSS Transforms Module Level 1＞. URL: https://drafts.csswg.org/css-transforms/
[CSS4BACKGROUND]
    Bert Bos; Elika J. Etemad; Lea Verou. ＜CSS Backgrounds and Borders Module Level&nbsp;4＞. Proposal for a CSS module. URL: https://drafts.csswg.org/css-backgrounds-4/
[CSSOM-VIEW]
    Simon Pieters. ＜CSSOM View Module＞. URL: https://drafts.csswg.org/cssom-view/
[EPUB-33]
    Ivan Herman; Matt Garrish; Dave Cramer. ＜EPUB 3.3＞. URL: https://w3c.github.io/epub-specs/epub33/core/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SVG2]
    Amelia Bellamy-Royds; et al. ＜Scalable Vector Graphics (SVG) 2＞. URL: https://svgwg.org/svg2-draft/
[UAX29]
    Josh Hadley. ＜Unicode Text Segmentation＞. 16 August 2023. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-43.html

●●ref_informative

[CSS-CONTAIN-1]
    Tab Atkins Jr.; Florian Rivoal. ＜CSS Containment Module Level 1＞. URL: https://drafts.csswg.org/css-contain-1/
[CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Box Sizing Module Level 3＞. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-TEXT-3]
    Elika Etemad; Koji Ishii; Florian Rivoal. ＜CSS Text Module Level 3＞. URL: https://drafts.csswg.org/css-text-3/
[CSS-WRITING-MODES-3]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 3＞. URL: https://drafts.csswg.org/css-writing-modes-3/
[CSS1]
    Håkon Wium Lie; Bert Bos. ＜Cascading Style Sheets, level 1＞. 13 September 2018. REC. URL: https://www.w3.org/TR/CSS1/
[MEDIAQUERIES-5]
    Dean Jackson; et al. ＜Media Queries Level 5＞. URL: https://drafts.csswg.org/mediaqueries-5/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Overflow Module Level 3</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-overflow-3/
公表履歴
	https://www.w3.org/standards/history/css-overflow-3/

フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-overflow-3">CSSWG Issues Repository</a>

編集
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	<a href="http://florian.rivoal.net/">Florian Rivoal</a> (On behalf of Bloomberg)
前任編集者
	<a href="https://dbaron.org/">L. David Baron</a> (Mozilla)
Suggest an Edit for this Spec
	https://github.com/w3c/csswg-drafts/blob/main/css-overflow-3/Overview.bs
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-overflow-3
</script>

<body>

<header>
	<hgroup>
<h1>CSS Overflow Module Level 3</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この~moduleは、
視覚-媒体における~scroll可能な~overflowの取扱いに関係する~CSSの特能を包含する：
◎
This module contains the features of CSS relating to scrollable overflow handling in visual media.＼
</p>
<ul>
	<li>
この~levelは、
次も含む，既存の~overflow特能~用に精確な仕様を完了することに注力している
⇒＃
`overflow$p ~propと その下位prop ／
`text-overflow$p ~prop
◎
This level is focused on completing a precise specification for the existing overflow features, including the overflow property and its longhands; and the text-overflow property.＼
</li>
	<li>
`CSS-CONTAIN-1$r ／ `CSS-CONTAIN-2$r
の~supportにおいて導入された，少数の追加的な特能も定義された
⇒＃
<code class="css">`overflow^p: `clip^v</code>,
`overflow-clip-margin$p ~prop
◎
A few additional features introduced in support of [CSS-CONTAIN-1] and [CSS-CONTAIN-2] are also defined: overflow: clip and the overflow-clip-margin property.
</li>
</ul>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは編集者草案の公な複製です…
【以下、この節の他の内容は，~SOTD-CSSに移譲。】
</p>

<p>
`overflow$p, その下位propの記述は、
これまでの作業草案や `CSS2$r よりも有意に完全かつ正しいものと見なされていますが，少数の問いと課題は まだ残っています。
`overflow$p 用の値 `clip$v1, および
`overflow-clip-margin$p
は、
まだ新しいので実装~経験を欠いています
【この段落が記されて以降に追加されたもの（例： `scrollbar-gutter$p ）も該当しよう】
。
`text-overflow$p は安定的であり，
`CSS-UI-3$r における以前の定義から変更されていません。
まだ，実装~経験により全部的に検証されてはいませんが、
`line-clamp$p, その下位propの設計は，概ね完全と見なされています。
この仕様の以前の~versionは、
断片化を利用して新たな~boxを作成することにより，~overflowを取扱うための試験的な新たな案を含んでいました。
これらの案は、
放棄されたわけではなく，
`~level 4＠~CSSOVERFLOW4$ へ先送りされたに過ぎません。
断片~化~overflowに対する作業は、
この~levelの安定~化が完了したなら，再開されることになります。
◎
The description of overflow and its longhands is considered significantly more complete and correct than previous working drafts or than [CSS2], but a few questions and issues remain open. overflow: clip and overflow-clip-margin are rather new, and lack implementation experience. text-overflow is stable, is unchanged form its earlier definition in [CSS-UI-3]. While not yet fully validated by implementation experience, the design of line-clamp and its longhands is considered roughly complete. Earlier versions of this specification included experimental new ideas for handling overflow by creating new boxes using fragmentation. These ideas are not abandoned; they are merely deferred until Level 4. Work will resume on fragmented overflow once this level stabilizes completed.
</p>

<p>
次の特能は
`~risk下＠~CSScommon#at-risk$
にあり，勧告候補の期間~中に落とされるかもしれません：
◎
The following features are at-risk, and may be dropped during the CR period:
</p>

<ul>
	<li>
`max-lines$p ~prop
【すでに~level 4 へ先送りされた。】
◎
the max-lines property
</li>
</ul>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

<p>
`CSS1$r では、［
指定された~sizeを伴う要素の内側には収まり切らない内容
］を配置することは，
一般に著作-時の誤りとされていた。
そのような内容は、
要素の限界域の外側まで拡幅して，およそ他の要素と重合することになる。
◎
In CSS Level 1 [CSS1], placing more content than would fit inside an element with a specified size was generally an authoring error. Doing so caused the content to extend outside the bounds of the element, which would likely cause that content to overlap with other elements.
</p>

<p>
`CSS2$r は、
`overflow$p ~propを導入した
— それは、
各［
~overflowした内容
］を［
次のいずれかとして取扱うよう指定すること
］を作者に許容する：
◎
CSS Level 2 [CSS2] introduced the overflow property,＼
</p>
<ul>
	<li>
~scrollする
— すなわち、
~overflowは，もはや著作-時の誤りとされなくなった。
◎
which allows authors to have overflow be handled by scrolling, which means it is no longer an authoring error.＼
</li>
	<li>
切取る
— それは、
作者が~overflowした内容を示さないことを意図するときイミを成す。
◎
It also allows authors to specify that overflow is handled by clipping, which makes sense when the author’s intent is that the content not be shown.
</li>
</ul>

<p>
この仕様は：
◎
This specification＼
</p>
<ul>
	<li>
長い間~de-factoであった `overflow-x$p, `overflow-y$p ~propを導入する。
◎
introduces the long-standing de-facto overflow-x and overflow-y properties,＼
</li>
	<li>
`overflow$p に値 `clip$v1 を追加する。
◎
adds a clip value,＼
</li>
	<li>
~overflowの取扱いを より全部的に定義する。
◎
and defines overflow handling more fully.
</li>
</ul>

<p lang="en">
[Something something `max-lines$p.]
</p>

<p class="note">注記：
この仕様はまた、
以前は `CSS-UI-3$r にて定義されていた `text-overflow$p ~propを `block-ellipsis$p と一緒に呈示するため，
その定義を追加や改変を伴わずに再現する。
【~level 4 へ先送りされた。】
◎
Note: This specification also reproduces the definition of the text-overflow property previously defined in [CSS-UI-3], with no addition or modification, in order to present text-overflow and block-ellipsis together.
</p>

		<section id="values">
<h3 title="Value Definitions">1.1. 値~定義</h3>

<p class="trans-note">【
この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。
】</p>

		</section>
		<section id="placement">
<h3 title="Module Interactions">1.2. ~module間の相互作用</h3>

<p>
この~moduleは、
`CSS2$r `§ ~overflowと切抜き＠~CSS22/visufx.html#overflow-clipping$,
`CSS-UI-3$r `§ ~overflow省略符＠~TR/css-ui-3/#text-overflow$
にて定義された特能を置換して（取って代わる）拡張する。
◎
This module replaces (supersedes) and extends features defined in [CSS2] section 11.1 Overflow and clipping and [CSS-UI-3] section 5.2. Overflow Ellipsis: the text-overflow property.
</p>

		</section>
	</section>
	<section id="overflow-concepts">
<h2 title="Overflow Concepts and Terminology">2. ~overflowの概念と各種用語</h2>

<p>
~CSSにおける用語
`~overflow@
（ `overflow^en ）は、
~boxの内容が~boxのいずれかの辺
（すなわち，その
`内容~辺$, `~padding辺$, `~border辺$, `~margin辺$）
の外側へ拡幅することを指す。
この用語は、
次のいずれかとして解釈される
⇒＃
この~overflowを生じさせた要素や特能／
その種の特能により占められる領域（†矩形とは限らない）／
その領域を囲む~~最小な矩形（この解釈が最も共通的にある）
◎
CSS uses the term overflow to describe the contents of a box that extend outside one of that box’s edges (i.e., its content edge, padding edge, border edge, or margin edge). The term might be interpreted as elements or features that cause this overflow, the non-rectangular region occupied by these features, or, more commonly, as the minimal rectangle that bounds that region.＼
</p>

<p class="trans-note">【
この仕様の “矩形” は、
当の~boxの辺に平行であることも含意する。
したがって， “矩形でない” は、
~boxの辺に平行でない長方形も含む。
】</p>

<p>
~boxの`~overflow$は、
次に該当する~boxすべての［
~layout, ~style付け
］に基づいて算出される
⇒
~box自身, および~boxの子孫のうち，その`包含塊の連鎖$が 当の~boxを含むもの
◎
A box’s overflow is computed based on the layout and styling of the box itself and of all descendants whose containing block chain includes the box.
</p>

<p>
~boxにおける`~overflow$は、
ほとんどの事例では，［
~box自身の限界域と各種~propに加え，~boxの各 子~boxの`~overflow$
］から算出できるが、
常に可能とは限らない。
例えば， `transform-style$p が `preserve-3d^v にされた子孫がある場合、
それらも精査するモノトスル。
`CSS3-TRANSFORMS$r
◎
In most cases, overflow can be computed for any box from the bounds and properties of that box itself, plus the overflow of each of its children. However, this is not always the case; for example, when transform-style: preserve-3d [CSS3-TRANSFORMS] is used on some of the children, any of their descendants with transform-style: preserve-3d must also be examined.
</p>

<p>
~overflowには、
次に挙げる 2 つの種別がある
— ~UAは、
これらを異なる目的で利用する：
◎
There are two different types of overflow, which are used for different purposes by the UA:
</p>
<ul>
	<li>
`~ink~overflow$
◎
ink overflow
</li>
	<li>
`~scroll可能な~overflow$
◎
scrollable overflow
</li>
</ul>

		<section id="ink">
<h3 title="Ink Overflow">2.1. ~ink~overflow</h3>

<p>
~boxの
`~ink~overflow@
（ `ink overflow^en ）は、［
~box／~boxの内容
］の一部を成しつつ，~boxの`~border~box$の外側に視覚-効果を作成させるものである。
~ink~overflowは、［
~layoutに影響しないか，影響するとしても`~scroll可能な~overflow区画$を拡幅するにとどまる
］ように定義された塗ng効果であり，次が挙げられる
⇒＃
`~box影＠~CSSBG#box-shadow$,
`~border画像＠~CSSBG#border-images$,
`~text装飾＠~CSSTEXTDECOR$,
~em~boxの外側に張り出している~glyph【！overhanging glyphs (with negative side bearings, or with ascenders/descenders extending outside the em box)】,
`外形線$,
等々
◎
The ink overflow of a box is the part of that box and its contents that creates a visual effect outside of the box’s border box. Ink overflow is the overflow of painting effects defined to not affect layout or otherwise extend the scrollable overflow area, such as box shadows, border images, text decoration, overhanging glyphs (with negative side bearings, or with ascenders/descenders extending outside the em box), outlines, etc.
</p>

<p>
~CSSにおける一部の効果は，視覚的にどこまで覆うかを定義しないので
（例： `text-shadow$p や `box-shadow$p によるボカシは理論的に無限になる）、
`~ink~overflow$による拡幅量は，定義されない。
◎
Since some effects in CSS (for example, the blurs in text-shadow [CSS-TEXT-3] and box-shadow [CSS-BACKGROUNDS-3], which are theoretically infinite) do not define what visual extent they cover, the extent of the ink overflow is undefined.
</p>

<p>
`~ink~overflow区画@
（ `ink overflow area^en ）は、
~boxとその内容の`~ink~overflow$が占める区画（矩形とは限らない）である。
`~ink~overflow矩形@
は、［
~boxの辺に平行かつ `~ink~overflow区画$を包含する
］ような~~最小な矩形である。
それは、
変形 `CSS3-TRANSFORMS$r に因り，
~box以外の座標系では矩形になるとは限らないことに注意。
◎
The ink overflow area is the non-rectangular area occupied by the ink overflow of a box and its contents, and the ink overflow rectangle is the minimal rectangle whose axes are aligned to the box’s axes and that contains the ink overflow area. Note that the ink overflow rectangle is a rectangle in the box’s coordinate system, but might be non-rectangular in other coordinate systems due to transforms. [CSS3-TRANSFORMS]
</p>

<p>
`置換され$る内容における~overflowは、
常に`~ink~overflow$とされる
（`~scroll可能な~overflow$ではなく）。
◎
Any overflow of replaced content is always ink overflow (as opposed to scrollable overflow).
</p>

		</section>
		<section id="scrollable">
<h3 title="Scrollable Overflow">2.2. ~scroll可能な~overflow</h3>

<p>
~box
— 以下、
この節を通して %B と記す —
の
`~scroll可能な~overflow@
（ `scrollable overflow^en ）は、
~scroll用の仕組みを供する必要があるような，
%B の`~padding辺$の外側まで拡幅するモノたちが成す集合である。
◎
The scrollable overflow of a box is the set of things extending outside of that box’s padding edge for which a scrolling mechanism needs to be provided.
</p>

<p>
%B の
`~scroll可能な~overflow区画@
（ `scrollable overflow area^en ）
は、
`~scroll可能な~overflow$が占める領域である（矩形とは限らない）。
%B の
`~scroll可能な~overflow矩形@
（ `scrollable overflow rectangle^en ）は、［
%B の辺に平行かつ
`~scroll可能な~overflow区画$を包含する
］ような，~~最小な矩形である。
◎
The scrollable overflow area is the non-rectangular region occupied by the scrollable overflow, and the scrollable overflow rectangle is the minimal rectangle whose axes are aligned to the box’s axes and that contains the scrollable overflow area.
</p>

<p>
%B の`~scroll可能な~overflow区画$は、
次の和集合である：
◎
The scrollable overflow area is the union of:
</p>

<ul>
	<li>
【！The `~scroll容器$の自前の】%B の`~padding~box$。
◎
The scroll container’s own padding box.
</li>
	<li>
【！The `~scroll容器$】%B に直に包含されている，すべての`行l~box$。
◎
All line boxes directly contained by the scroll container.
</li>
	<li>
<p>
［
%B を包含塊とする，すべての~box
］の`~border~box$
— ただし、
~border~box全体が %B の`到達-不能な~scroll可能な~overflow領域$内に位置するものは除く。
ここで、
変形を伴う~box `CSS3-TRANSFORMS$r に対しては，［
その`~3D描画~文脈$を確立した要素の平面
］上に投影した結果を織り込むとする。
◎
The border boxes of all boxes for which it is the containing block and whose border boxes are positioned not wholly in the unreachable scrollable overflow region, accounting for transforms by projecting each box onto the plane of the element that establishes its 3D rendering context. [CSS3-TRANSFORMS]
</p>

<p class="issue">
変形に対するこの取扱いの記述は、
正確aに足るか？
◎
Is this description of handling transforms sufficiently accurate?
</p>

<p>
`~border~box$のうち面積 0 になるものは、
`~scroll可能な~overflow区画$には影響しない。
◎
Border boxes with zero area do not affect the scrollable overflow area.
</p>
	</li>
	<li>
<p>
%B が［
`格子~駒$／`~flex駒$
］用の包含塊を確立している場合、
それら各~駒の`~margin区画$。
◎
The margin areas of grid item and flex item boxes for which the box establishes a containing block.
</p>

<p>
~UAは、
%B が他の~box用の包含塊を確立している場合も，その`~margin区画$を`追加的に^em含めてもヨイ。
しかしながら，どの条件の下でこれを含めるかは、
この~levelでは定義されない。
◎
The UA may additionally include the margin areas of other boxes for which the box establishes a containing block; however, the conditions under which such margin areas are included is undefined in this level.＼
</p>

<p class="issue">
もっと~testして究明する必要があるので、
この草案では先送りされている。
◎
This needs further testing and investigation; is therefore deferred in this draft.
</p>
	</li>
	<li>
<p>
［
上に挙げた~box（面積 0 の~boxも含む）のうち ~AND↓ を満たすもの
］の`~scroll可能な~overflow区画$（上述した変形も織り込む）：
◎
The scrollable overflow areas of all of the above boxes (including zero-area boxes and accounting for transforms as described above), provided＼
</p>
		<ul>
			<li>
自身の `overflow$p は `visible$v1
（すなわち，~box自身は~overflowを切取っていない）
◎
they themselves have overflow: visible (i.e. do not themselves trap the overflow)＼
</li>
			<li>
その`~scroll可能な~overflow$は、
すでに
（例： `clip$p ~propや `contain$p ~propにより）
切取られていない
◎
and that scrollable overflow is not already clipped (e.g. by the clip property or the contain property).
</li>
		</ul>

<p class="note">注記：
各種 `mask-*^p ~prop `CSS-MASKING-1$r は、
`~scroll可能な~overflow区画$には影響しない。
◎
Note: The mask-* properties [CSS-MASKING-1] do not affect the scrollable overflow area.
</p>

<p class="issue">
何が`~scroll可能な~overflow$を［
切取る, 切取らない
］べきかを評価する必要がある。
[`8607$issue]
◎
Need to evaluate what should/should not clip scrollable overflow. [Issue #8607]
</p>
	</li>
	<li>
<p>
［
`place-content$p 用の値［
`end＠~CSSALIGN#valdef-self-position-end$v ／
`start＠~CSSALIGN#valdef-self-position-start$v
］による整列の要件を満たす~scroll位置
］を可能化するために必要yなだけ［
`~scroll可能な~overflow矩形$
］に追加される，追加的な~padding。
◎
Additional padding added to the scrollable overflow rectangle as necessary to enable scroll positions that satisfy the requirements of both place-content: start and place-content: end alignment.
</p>

<p class="note">注記：
この~paddingは、
`~scroll可能な~overflow矩形$の中での %B の自前の~paddingを表現する
— ［
%B の内容が %B の終端へ~scrollされたとき，
その`~flow内$にある（あるいは浮動された）内容の終端~辺と %B の`~border辺$の合間に~paddingがある
］よう。
それは概して、
少数の事例
— ［
`~flow外$にある`有位置$な要素／子孫における可視な~overflow
］により，［
`~scroll可能な~overflow矩形$の~size
］が［
当の`~scroll容器$の内容の概念的な “内容~辺” の外側
］へ すでに増やされていたときなど —
を除いて，
%B の自前の~paddingと正確に同じ~sizeになる。
◎
Note: This padding represents, within the scrollable overflow rectangle, the box’s own padding so that when its content is scrolled to its end, there is padding between the edge of its in-flow (or floated) content and the border edge of the box. It typically ends up being exactly the same size as the box’s own padding, except in a few cases—such as when an out-of-flow positioned element, or the visible overflow of a descendent, has already increased the size of the scrollable overflow rectangle outside the conceptual “content edge” of the scroll container’s content.
</p>

<figure>
<figcaption class="issue" id="_dgm-scroll-align-padding">
この画像を適正な~SVGに置換する。
◎
Issue: Replace this image with a proper SVG.
</figcaption></figure>

	</li>
</ul>

<p>
加えて，~web互換性を得るための拘束に因り
（その原因は、
旧来の~bugにつけ込んで，［
視覚系~browserに対しては こっそり内容を隠しながら,
探索~engineや発話~出力に対してはそうしなかった
］作者たちにある）、
~UAには、［
`到達-不能な~scroll可能な~overflow領域$内の内容を切取る
］ことが要求される
◎
Additionally, due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip any content in the unreachable scrollable overflow region.
</p>

<p class="note" role="note">注記：
`内容-分布~prop$は、［
`~scroll容器$の`整列~subject$が整列~後に到達-可能になる
］ことを確保するため，
`到達-不能な~scroll可能な~overflow領域$を`改めることもある＠~CSSALIGN#overflow-scroll-position$。
`CSS-ALIGN-3$r
◎
Note: The content-distribution properties can alter the unreachable scrollable overflow region to ensure that a scroll container’s alignment subject is reachable after alignment. [CSS-ALIGN-3]
</p>

<p class="note">注記：
~boxの`~scroll可能な~overflow矩形$は，常に~boxの辺に平行になるが、
変形 `CSS3-TRANSFORMS$r に因り，
~box以外の座標系では矩形になるとは限らないことに注意。
このことは、
実際には必要yでないときでも，~scrollbarが現れ得ることを意味する。
◎
Note: The scrollable overflow rectangle is always a rectangle in the box’s own coordinate system, but might be non-rectangular in other coordinate systems due to transforms [CSS3-TRANSFORMS]. This means scrollbars can sometimes appear when not actually necessary.
</p>

		</section>
		<section id="scrolling">
<h3 title="Scrolling Overflow">2.3. ~overflowの~scroll法</h3>

<p>
~boxの`~overflow$は、
可視になるか切取られる。
~CSSは、
~boxが
`~scroll容器@
（ `scroll container^en ）になることも許容する。
`~scroll容器$は、［
自身の`~scroll可能な~overflow区画$を成す切取られた各部
］を［
~viewの中へ~scrollする
］ことを許容する。
◎
A box’s overflow can be visible or clipped. CSS also allows a box to be a scroll container that allows clipped parts of its scrollable overflow area to be scrolled into view.＼
</p>

<p>
所与の`~scroll容器$
— 以下、
この節を通して， %容器 と称する —
の視覚- “表示域”
（それを通して，`~scroll可能な~overflow区画$を~viewできる~~領域）
は、
%容器 の
`~scrollport@
（ `scrollport^en ）と呼ばれ， %容器 の`~padding~box$に一致する。
所与の~boxに
`最も近い~scrollport@
（ `nearest scrollport^en ）は、［
~boxの先祖である`~scroll容器$のうち~boxに最も近いそれ
］の`~scrollport$を指す。
◎
The visual “viewport” of a scroll container (through which the scrollable overflow area can be viewed) coincides with its padding box, and is called the scrollport. A box’s nearest scrollport is the scrollport of its nearest scroll container ancestor.
</p>

<p>
~scrollingは、
利用者により起動されることも
（例えば，［
~scrollbarを操作する／
~touch~screenを~swipeする／
~keyboard~controlを利用する
］ことにより），
~scriptにより起動されることもある
（例えば，［
`scrollIntoView()＠~CSSOMVIEW#dom-element-scrollintoview$c ／
`focus()＠~HTMLinteraction#dom-window-focus$c
］~APIにより）。
%容器 の
`初期~scroll位置@
（ `initial scroll position^en ）とは、
~scrollingが効果を発揮する前における，
%容器 の`~scrollport$の中での［
%容器 の`~scroll可能な~overflow矩形$の初期~位置
］である。
%容器 の`初期~scroll位置$は、
概して，
%容器 の`書字~mode$に依存する
— それは、
他が指定されない限り，
%容器 の`~scroll原点~位置$と一致する。
例えば、
`scroll-initial-target$p ~prop `CSS-SCROLL-SNAP-2$r を利用して，
`初期~scroll位置$を変更できる。
◎
Scrolling operations can be initiated by the user (for example, by manipulating a scrollbar, swiping a touchscreen, or using keyboard controls) or by script (for example, by the scrollIntoView() or focus() APIs). The initial position of the scrollable overflow rectangle within the scrollport before any scrolling operations take effect is the initial scroll position. The initial scroll position is typically dependent on the scroll container’s writing mode, and, unless otherwise specified, coincides with its scroll origin position. For example, scroll-initial-target property can be used to change the initial scroll position. [CSS-SCROLL-SNAP-2]
</p>

<p>
%容器 の
`~scroll位置@
（ `scroll position^en ）は、
%容器 の`~scrollport$の中での，
%容器 の`~scroll可能な~overflow矩形$の［
特定0の整列
］である。
%容器 の
`~scroll~offset@
（ `scroll offset^en ）とは、
%容器 の`~scroll原点$から %容器 の`~scroll位置$までの距離である。
◎
A scroll position is a particular alignment of the scrollable overflow rectangle within its scrollport. It is associated with a scroll offset which is its distance from the scroll origin.
</p>

<p>
%容器 の
`~scroll原点@
（ `scroll origin^en ）は、
%容器 の`~scroll可能な~overflow矩形$が拡がる起点とされる座標である。
それは、
他が指定されない限り，当の矩形の［
`塊-始端$かつ`行内-始端$
］にある隅になる。
（例えば，`~flex容器$においては、［
`主-始端$かつ`交叉-始端$
］にある隅になる）。
どちらかの軸において`~scroll原点$【から負な方向へ】を超える区画は
— 他により
（例： `内容~整列＠~CSSALIGN#overflow-scroll-position$ `css-align-3$r により）
調整されない限り —
%容器 の
`到達-不能な~scroll可能な~overflow領域@
（ `unreachable scrollable overflow region^en ）
と見なされ、
そこに描画される内容は，読者からは~access可能にならない
— `§ ~scroll可能な~overflow＠#scrollable$を見よ。
%容器 は、［
%容器 の`~scroll原点$が %容器 の`~scrollport$の対応している隅と一致する
］とき，`~scroll原点$に~scrollされているという。
%容器 の
`~scroll原点~位置@
（ `scroll origin position^en ）とは，この`~scroll位置$であり、
常にではないが，
通例的には`初期~scroll位置$と一致する。
◎
The scroll origin is the anchor coordinate of the scrollable overflow rectangle, from which the scrollable overflow rectangle expands. Unless otherwise specified, it is the block-start inline-start corner of the scrollable overflow rectangle. (For example, in a flex container it is the main-start cross-start corner.) Unless otherwise adjusted (e.g. by content alignment [css-align-3]), the area beyond the scroll origin in either axis is considered the unreachable scrollable overflow region: content rendered here is not accessible to the reader, see § 2.2 Scrollable Overflow. A scroll container is said to be scrolled to its scroll origin when its scroll origin coincides with the corresponding corner of its scrollport. This scroll position, the scroll origin position, usually, but not always, coincides with the initial scroll position.
</p>

<div class="example">
<p>
例えば，`~scroll留ng$ `CSS-SCROLL-SNAP-1$r は、
`初期~scroll位置$を`~scroll原点~位置$から離れた所に変更し得る。
◎
For example, scroll snapping [CSS-SCROLL-SNAP-1] can change the initial scroll position away from the scroll origin position.
</p>
</div>

<p class="issue">
`基底線~整列$の様なものが［
`初期~scroll位置$, `~scroll原点~位置$
］どちらに依存するか検査する。
◎
Check whether things like baseline alignment depend on the initial scroll position or the scroll origin position.
</p>

<div class="issue">
<p>
これは、
`~scroll~offset$用の座標系を定義しない。
それが［
下方や右方へ増えるのか,
塊-軸や行内-軸の終端へ向かって増えるのか,
`~scroll原点$から離れるに伴い増えるのか
］は、
定義されない。
各~APIが自身の座標~modelを定義するべきか？
◎
This doesn’t define a coordinate system for scroll offsets. Whether they increase downward/rightward, block/inline-axis endward, or away from the scroll origin is not defined. Should each API define its coordinate model?
</p>

<p class="trans-note">【
各種~定義に “距離” や “整列” など，方向を含意しない（いくぶん曖昧な）語が利用されているのは、
この課題に因ると見受けられる。
】</p>
</div>

<p>
~pageの`~canvas$を~scrollする根~表示域は、
`首要な書字~mode$を利用して，その［
`~scroll原点$, `初期~scroll位置$
］を決定する。
◎
The root viewport, which scrolls the page canvas, uses the principal writing mode for determining its scroll origin and initial scroll position.
</p>

<p class="note">注記：
`~scroll容器$（または、その ある先祖）が~graphicな変形の~targetである事例においては、
~UAは，この変形を［
利用者~入力を~scrollingへ対応付けるとき
］に織り込む必要があるかもしれない。
一例として，~touch~screen上で利用者が内容を直に~dragして~scrollする所では、
~scrollingの方向と当の~gestureが合致するよう，変形を織り込むことが期待されよう。
他方，他の利用者~入力（ ~PageDown ~UIkey, 一次元的な~scroll~wheelなど）は、
もっと自然に，変形を無視して解釈されるかもしれない。
~scroll用の各~仕組み用に適切な挙動を選ぶことは、
~UAの責務である。
◎
Note: In the case where a scroll container (or one of its ancestors) is the target of a graphical transform, the UA might need to take this transform into account when mapping user inputs to scrolling operations. For instance, on a touch screen where the user scrolls by directly dragging the content, the transform would be expected to be taken into account to match the direction of scrolling to the gesture. On the other hand, other user inputs (such as the Page Down key, or a 1D scroll wheel) might be more naturally interpreted ignoring the transform. Choosing the appropriate behavior for each scrolling mechanism is the responsibility of the UA.
</p>

		</section>
	</section>
	<section id="overflow-properties">
<h2 title="Scrolling and Clipping Overflow">3. ~overflowの~scroll法と切取n法</h2>

		<section id="overflow-control">
<h3 title="Managing Overflow: the overflow-x, overflow-y, and overflow properties">3.1. ~overflowの管理-法： `overflow-x^p, `overflow-y^p,`overflow^p ~prop</h3>

<p>
これらの~propは、［
~boxの`~overflow$が切取られるかどうか
］および［
その場合に~boxは`~scroll容器$になるかどうか
］を指定する。
◎
These properties specify whether a box’s overflow is clipped, and if so, whether it is a scroll container.
</p>

◎名
`overflow-x@p,
`overflow-y@p,
`overflow-block@p,
`overflow-inline@p
◎値 `overflow^p0 `visible$v | `hidden$v | `clip$v | `scroll$v | `auto$v
◎初 `visible$v
◎適 `塊~容器$, `~flex容器$, `格子~容器$
◎
block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT], and replaced elements
◎継 されない
◎百 受容しない
◎算 通例的には指定されたとおり
— ただし，~textを見よ。
◎
usually specified value, but see text
◎順 文法に従う
◎ア 離散的
◎論 `overflow$p
◎表終

<p>
［
`overflow-x$p ／ `overflow-y$p
］~propは、［
横~軸／縦~軸
］における`~overflow$
（すなわち，~boxの［
左端または右端／上端または下端
］側を~overflowするとき）
の取扱いを指定する。
◎
The overflow-x property specifies the handling of overflow in the horizontal axis (i.e., overflow from the left and right sides of the box), and the overflow-y property specifies the handling of overflow in the vertical axis (i.e., overflow from the top and bottom sides of the box).
</p>

<p>
［
`overflow-block$p ／ `overflow-inline$p
］~propは、
同様に，［
`塊-軸$／`行内-軸$
］における`~overflow$の取扱いを指定する。
◎
The overflow-block and overflow-inline properties likewise specify the handling of overflow in the block and inline axis, respectively
</p>

<p>
これら 4 種の~propは、
`overflow$p `略式~prop$と一緒に`論理-~prop~group$を形成し，
`CSS-LOGICAL-1$r `§ ~flow相対な~box~model~prop＠~CSSLOGICAL#box$にて定義されるとおり相互作用する。
◎
These four properties form a logical property group together with the overflow shorthand, and interact as defined in CSS Logical Properties 1 § 4 Flow-Relative Box Model Properties.
</p>

◎名 `overflow@p
◎値 `overflow-block$tp{1,2}
◎初 `visible$v
◎適 `塊~容器$, `~flex容器$, `格子~容器$
◎
block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
◎継 されない
◎百 受容しない
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 離散的
◎表終

<p>
`overflow$p ~propは、
`略式~prop$であり，指定された 2 個の値を順に［
`overflow-x$p, `overflow-y$p
］の指定d値に設定する。
2 個目の値が省略された場合、
1 個目の値から複製される。
◎
The overflow property is a shorthand property that sets the specified values of overflow-x and overflow-y in that order. If the second value is omitted, it is copied from the first.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl>
	<dt>`visible@v</dt>
	<dd>
~overflowに対する特別な取扱いはない。
すなわち、
~boxの内容は，~boxの外側に位置されれば そこにも描画される。
~boxは`~scroll容器$にはならない。
◎
There is no special handling of overflow, that is, the box’s content is rendered outside the box if positioned there. The box is not a scroll container.
</dd>

	<dt>`hidden@v</dt>
	<dd>
<p>
次を指示する：
◎
This value indicates that＼
</p>
		<ul>
			<li>
~boxの内容は、
`~padding~box$で切取られる。
◎
the box’s content is clipped to its padding box and that＼
</li>
			<li>
<p>
~UAは：
</p>
				<ul>
					<li>
次を供さないモノトスル
⇒
切抜き領域の外側にある内容を~viewするための，~scroll用~UI
</li>
					<li>
利用者が次などにより直に~scrollすることを許容しないモノトスル
⇒＃
~touch~screen上を~dragする／
~mouseの~scroll用~wheelを利用する
</li>
				</ul>
◎
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, such as dragging on a touch screen or using the scrolling wheel on a mouse.＼
</li>
			<li>
それでも、
内容は，~program的には~scrollできるモノトスル
— 例えば `CSSOM-VIEW$r にて定義される仕組みを利用して。
したがって、
~boxは`~scroll容器$になる。
◎
However, the content must still be scrollable programmatically, for example using the mechanisms defined in [CSSOM-VIEW], and the box is therefore still a scroll container.
</li>
		</ul>
	</dd>

	<dt>`clip@v</dt>
	<dd>
<p>
次を指示する：
◎
This value indicates that＼
</p>
		<ul>
			<li>
~boxの内容は、
`~overflow切取n辺$で切取られる。
◎
the box’s content is clipped to its overflow clip edge and that＼
</li>
			<li>
~UAは、［
切抜き領域の外側にある内容を~viewするための，~scroll用~UI
］を供するベキでない。
◎
no scrolling user interface should be provided by the UA to view the content outside the clipping region.＼
</li>
			<li>
`hidden$v のときと違って、
どのような仕組みでも，内容は~scrollできない。
したがって、
~boxは`~scroll容器$にならない。
◎
In addition, unlike overflow: hidden which still allows programmatic scrolling, overflow: clip forbids scrolling entirely, through any mechanism, and therefore the box is not a scroll container.
</li>
		</ul>
	</dd>
	<dd class="trans-note">【
この値は、
CSS2 には無かったもの。
】</dd>
	<dd>
<p>
`hidden$v と違って、
この値は，要素に新たな整形~文脈を確立させる<strong>ことはない</strong>。
◎
Unlike hidden, this value does not cause the element to establish a new formatting context.
</p>

<p class="note">注記：
~boxに整形~文脈も確立させたいと求める作者は、
この値に加えて
<code class="css">`display$p: `flow-root＠~CSSDISP#valdef-display-flow-root$v</code>
を利用できる。
◎
Note: Authors who also want the box to establish a formatting context may use display: flow-root together with overflow: clip.
</p>
	</dd>

	<dt>`scroll@v</dt>
	<dd>
<p>
次を指示する：
◎
This value indicates that＼
</p>
		<ul>
			<li>
~boxの内容は、
`~padding~box$で切取られる。
◎
the content is clipped to the padding box,＼
</li>
			<li>
~boxの内容を~viewの中へ~scrollできる。
したがって、
~boxは`~scroll容器$になる。
◎
but can be scrolled into view (and therefore the box is a scroll container).＼
</li>
		</ul>
	</dd>
	<dd>
加えて，~UAは、［
利用者~向けの~scroll用の仕組みを，~screen上に可視にする（~scrollbarや~pan用のそれなど）
］場合，その仕組みを
— ~overflowの~~有無にかかわらず —
表示するベキである。
これにより、
動的~環境において~scrollbarが現れたり消えたりする問題を避けれる。
◎
Furthermore, if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.＼
</dd>
	<dd>
~~目的の媒体が `print＠~MQ5#valdef-media-print$v であるときは、
~overflowしている内容は印刷されてもヨイ
— どこに印刷するかは定義されていない。
◎
When the target medium is print, overflowing content may be printed; it is not defined where it may be printed.
</dd>

	<dt>`auto@v</dt>
	<dd>
~boxに`~scroll可能な~overflow$が［
あるときは `scroll$v ／
他のときは `hidden$v
］の様にふるまう。
【したがって、いずれにせよ，~boxは`~scroll容器$になる。】
したがって，~UAが利用している~scroll用の仕組み
（~scrollbarや~pan用のそれなど）
が~screen上で可視になるならば、
その仕組みは，~overflowがある場合に限り表示される。
◎
Like scroll when the box has scrollable overflow; like hidden otherwise. Thus, if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism will only be displayed if there is overflow.
</dd>
</dl>

<p>
`overflow$p 用の値のうち：
◎
↓</p>
<ul>
	<li>
次に挙げるものは、
`~scroll可能な値@
であると称される
⇒＃
`scroll$v ／
`auto$v ／
`hidden$v
◎
The scroll, auto, and hidden values are known as the scrollable values of overflow.＼
</li>
	<li>
<p>
次に挙げるものは、
`~scroll不能な値@
であると称される
⇒＃
`visible$v ／
`clip$v
</p>

<p class="trans-note">【
これは，純粋に`~scroll可能な値$の否定になるので、
和訳では，この用語に代えて “`~scroll可能な値$でない” と称することにする。
】</p>
◎
The visible and clip values are known as the non-scrollable values.
</li>
</ul>

<p class="trans-note">【
これらは，より精確には `overflow$p の下位prop用の値なので、
`overflow^p 自体の値は，理論的には［
`~scroll可能な値$, 他の値
］が成す組合nもとり得ることになる。
しかしながら，［
算出d値／使用~値
］においては、
以下に述べる要件により，そのような組合nは生じ得ないことに注意。
“`overflow^p の［
算出d値／使用~値
］は`~scroll可能な値$である（でない）”
のような言明は，どの下位propも そうなることを意味する
（指定d値においては、
そのような言明は，多義的になるので妥当でない）。
】</p>

<p>
［
`overflow-x$p, `overflow-y$p
］【の指定d値】のうち どちらかが［
`visible$v, `clip$v
］以外をとる場合には、
他方に対する値［
`visible$v ／ `clip$v
］は［
`auto$v ／ `hidden$v
］に算出される。
◎
The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.＼
</p>

<p>
`置換され$る要素に対しては、
`算出d値$ `hidden$v は，さらに`使用~値$ `clip$v に解決される。
◎
On replaced elements, a computed hidden value further resolves to a used value of clip.
</p>

<p>
`塊~box$は、
その［
`overflow-x$p, `overflow-y$p
］の算出d値が どちらも†［
`visible$v, `clip$v
］以外になる場合には，
自身の内容~用に`独立な整形~文脈を確立-$する。
【† 上述により、どちらかが条件を満たす場合もそうなる。】
◎
If the computed value of overflow on a block box is neither visible nor clip nor a combination thereof, it establishes an independent formatting context for its contents.
</p>

<p>
~UAは、
~keyword `overlay$v も，
`auto$v の`旧来の別名~値$として~supportするモノトスル。
◎
User agents must also support the overlay keyword as a legacy value alias of auto.
</p>

			<section id="scroll-visibility">
<h4 title="Interaction of visibility and overflow">3.1.1. `visibility^p と `overflow^p の相互作用</h4>

<p>
`visibility$p ~propの算出d値が `hidden^v になる
— または `collapse^v であって `hidden^v と同じ効果になる —
下で，
`overflow$p 【の算出d値】は［
`scroll$v ／ `auto$v
］になる場合：
◎
If the computed value of the visibility property is hidden (or collapse when it has the same effect as hidden), and overflow is either scroll or auto, then:
</p>
<ul>
	<li>
~UAは、
~scroll用の仕組みを可視にしないモノトスル
— すなわち，［
`visibility$p が `hidden^v でないとき，通常は可視になる~scroll用の仕組み
］は、
~layoutには影響し続けるが，塗られない。
◎
The user agent must not make any scrolling mechanism visible. To the extent that the scrolling mechanism that would normally be visible in the absence of visibility: hidden affects layout, it continues to do so, but is not painted.
</li>
	<li>
`overflow$p に対する `hidden$v の事例と同じく
⇒
利用者-ヤリトリにより直に誘発される~scrollingは，不能化されるが、
~program的な~scrollingの効果は あり続ける。
◎
As would be the case with overflow: hidden, scrolling directly triggered by user interactions is disabled, but programmatic scrolling continues to take effect.
</li>
	<li>
当の要素が`~scroll容器$である場合、
前項による不能化-法【！The lack of interactive direct scrolling】は，利用者が［
その子孫のうち， `visibility$p が `visible^v に設定されたもの
］とヤリトリする場合（例：~mouse~wheelによる~scrolling）にも施行される。
◎
The lack of interactive direct scrolling is enforced even if the user interacts (e.g. with a mouse scrolling wheel) with a descendent of the visibility: hidden scroll container that is itself set to visibility: visible.
</li>
</ul>

			</section>
			<section id="corner-clipping">
<h4 title="Interaction of border-radius and overflow">3.1.2. `border-radius$p と `overflow$p の相互作用</h4>

<p>
`CSS-BACKGROUNDS-3$r `§ 隅における切取n法＠~CSSBG#corner-clipping$
にて言及されたとおり、
`overflow$p により確立された切抜き領域は，丸められ得る
— ［
`overflow-x$p, `overflow-y$p
］の算出d値に応じて：
◎
As mentioned in CSS Backgrounds 3 § 4.3 Corner Clipping, the clipping region established by overflow can be rounded:
</p>

<ul class="switch">
	<li>
どちらも［
`hidden$v ／ `scroll$v ／ `auto$v
］になる場合
⇒
切抜き領域は、
`CSS-BACKGROUNDS-3$r `§ 隅の形状付け＠~CSSBG#corner-shaping$
にて述べられるとおり，［
~border半径を`~padding辺$に調整した結果
］に基づいて丸められる。
◎
When overflow-x and overflow-y compute to hidden, scroll, or auto, the clipping region is rounded based on the border radius, adjusted to the padding edge, as described in CSS Backgrounds 3 § 4.2 Corner Shaping.
</li>
	<li>
どちらも `clip$v になる場合
⇒
切抜き領域は、
`§ 切抜き限界域を拡げる＠#overflow-clip-margin$
にて述べられるとおり，丸められる。
◎
When both overflow-x and overflow-y compute to clip, the clipping region is rounded as described in § 3.2 Expanding Clipping Bounds: the overflow-clip-margin property.
</li>
	<li>
一方は `clip$v,
他方は `visible$v
になる場合
⇒
切抜き領域は、
丸められない。
◎
However, when one of overflow-x or overflow-y computes to clip and the other computes to visible, the clipping region is not rounded.
</li>
	<li class="trans-note">【
どちらも `visible$v になる場合、
切抜き領域は無い。
】</li>
</ul>

			</section>
			<section id="static-media">
<h4 title="Overflow in Print and Other Static Media">3.1.3. 印刷その他の静的~媒体における~overflow</h4>

<p class="advisement">
静的~媒体（印刷など）では~scrollはアリでないので、
作者は，［
そのような媒体でも内容を~access可能にする
］よう気を付けるベキである。
例えば、
<code class="css">@media print, (update: none) { … }</code>
を利用して~layoutを調整して，関連な内容~すべてが同時に可視になるようにするなど。
◎
Since scrolling is not possible in static media (such as print) authors should be careful to make content accessible in such media, for example by using @media print, (update: none) { … } to adjust layout such that all relevant content is simultaneously visible.
</p>

<p>
対話的でない媒体における`~scroll容器$に対しては，
その `overflow$p 値が［
`auto$v ／ `scroll$v 
］ならば（ `hidden$v は~~除外される）、
~UAは，~scrollbarや省略符などを表示して ~scroll可能な~overflowを指示してもヨイ。
◎
On scroll containers in non-interactive media with an overflow value of auto or scroll (but not hidden) UAs may display an indication of any scrollable overflow, such as by displaying scrollbars or an ellipsis.
</p>

<p class="note">注記：
`~paged媒体$であっても，対話的になるものはある
— 例えば、
電子本~readerの~page割りされた内容など。
◎
Note: Not all paged media is non-interactive: for example, e-book readers paginate content, but are interactive.
</p>

			</section>
		</section>
		<section id="overflow-clip-margin">
<h3 title="Expanding Clipping Bounds: the overflow-clip-margin property">3.2. 切抜き限界域を拡げる： `overflow-clip-margin^p ~prop</h3>

◎名 `overflow-clip-margin@p
◎値 `visual-box$t || `length [0,∞]$t
◎初 `0px^v
◎適 `overflow$p が適用される~box
◎
boxes to which overflow applies 
◎継 されない
◎百 受容しない
◎算 ［
`length$t の算出d値,
`visual-box$t ~keyword
］が成す~pair
◎順 文法に従う
◎ア 
【互いの算出d値を成す】 `visual-box$t 値が合致するならば算出d値による／
他の場合は離散的
◎
per computed value if the &lt;visual-box&gt; values match; otherwise discrete
◎表終

<p>
この~propは、
~boxの
`~overflow切取n辺@
（ `overflow clip edge^en ）を定義する
— すなわち，次を定義する
⇒
~boxの内容は、［
~boxの`~overflow切取n辺$で切取るように定義された効果（上の
<code class="css">`overflow$p: `clip^v</code>
など†）
］により切取られる前に，限界域から精確に`どこまで^em外側に塗ることが許容されるか
【† 他にも， `contain$p による`塗り封込め$がある場合が該当する。】
◎
This property defines the overflow clip edge of the box, i.e. precisely how far outside its bounds the box’s content is allowed to paint before being clipped by effects (such as overflow: clip, above) that are defined to clip to the box’s overflow clip edge.
</p>

<p>
各種 値は、
次に従って定義される：
◎
Values are defined as follows:
</p>

<dl class="valdef">
	<dt id="valdef-overflow-clip-margin-visual-box">`visual-box$t</dt>
	<dd>
`length$t に指定された~offsetが 0 の場合の`~overflow切取n辺$として，どの~box辺を利用するかを指定する。
◎
Specifies the box edge to use as the overflow clip edge origin, i.e. when the specified offset is zero.
</dd>
	<dd>
省略-時の既定は、
`padding-box＠~CSSBOX#valdef-box-padding-box$v になるとする。
◎
If omitted, defaults to padding-box.
</dd>

	<dt id="valdef-overflow-clip-margin-length-0">`length [0,∞]$t</dt>
	<dd>
指定された~offsetは、
`~overflow切取n辺$は，指定された~box辺から どこまで拡がるかを規定する。
◎
The specified offset dictates how much the overflow clip edge is expanded from the specified box edge＼
</dd>
	<dd>
負な値は無効とする。
◎
Negative values are invalid.＼
</dd>
	<dd>
省略-時の既定は、
0 になるとする。
◎
Defaults to zero if omitted.
</dd>
</dl>

<p>
`~overflow切取n辺$は、［
指定された~offsetを `box-shadow$p の`拡幅~距離$に与えたとき
］の［
隅における`~border辺$の`外影$
］と正確に同じ仕方で形状付けられる。
`CSS-BACKGROUNDS-3$r ［
`§ 隅の形状付け＠~CSSBG#corner-shaping$,
`§ 影の［形状, 拡幅, 打抜き］＠~CSSBG#shadow-shape$
］を見よ
— そこには、
`~border辺$から外方への~offset用の公式が特に注記されている。
◎
The overflow clip edge is shaped in the corners exactly the same way as an outer box-shadow with a spread radius of the same cumulative offset from the box’s border edge. See CSS Backgrounds 3 § 4.2 Corner Shaping and CSS Backgrounds 3 § 6.1.1 Shadow Shape, Spread, and Knockout, noting in particular the formula for outsets beyond the border edge.
</p>

<p class="note">注記：
`overflow$p 【の算出d値】が［
`hidden^v ／ `scroll^v
］になる~boxに対しては、
`~overflow切取n辺$を利用するよう定義されないので，この~propによる効果は無い。
◎
Note: This property has no effect on boxes with overflow: hidden or overflow: scroll, which are not defined to use the overflow clip edge.
</p>

		</section>
		<section id="overflow-propagation">
<h3 title="Overflow Viewport Propagation">3.3. `overflow^p 値の表示域への伝播</h3>

`overflow^p0

<p>
~UAは、
`根~要素$の `display$p 値は `none^v でないならば，
根~要素に設定された `overflow-*$p 値を表示域に適用するモノトスル
— ただし、
`根~要素$が ~AND↓ も満たす場合…：
◎
UAs must apply the overflow-* values set on the root element to the viewport when the root element’s display value is not none.＼
However, when＼
</p>
<ul>
	<li>
`html$e 要素である
（`~HTML用の~XML構文＠~HTMLintro#html-vs-xhtml$ も含む）
`HTML$r
◎
the root element is an [HTML] html element (including XML syntax for HTML)＼
</li>
	<li>
その `overflow-*$p 値は両~軸とも `visible$v
◎
whose overflow value is visible (in both axes),＼
</li>
	<li>
その子~要素として，次を満たすものが在る
⇒
`body$e 要素であって，その `display$p 値は `none^v でない
◎
and that element has as a child a body element whose display value is also not none,＼
</li>
</ul>
<p>
…場合、
代わりに，該当する子~要素のうち最初のもの %body の `overflow-*^p 値を表示域に適用するモノトスル。
加えて， %body の `overflow$p の使用~値は、
`visible$v になるモノトスル。
◎
user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible.
</p>

<p class="note">注記：
~HTML［
`html$e ／ `body$e
］要素に`封込め$を利用している場合、
~HTML `body$e 要素に対するこの特別な取扱いは不能化される。
詳細は、
`CSS-CONTAIN-1$r `§ 強い封込め＠~CSSCONTAIN#contain-property$
を見よ。
◎
Note: Using containment on the HTML html or body elements disables this special handling of the HTML body element. See the CSS Containment 1 § 2 Strong Containment: the contain property for details.
</p>

<p class="note">注記：
`根~要素$の `overflow$p に対する `hidden$v は、
`初期~包含塊$の外側にあるものを切取らないこともある
— 初期~包含塊が表示域より小さい場合
（それは、携帯機にて起こり得る）。
【具体的には、動的に示される~toolbarの背後に “~overflowした” 内容へ~scroll可能になる。この特殊な挙動の詳細は、`5646$issue を見よ。】
◎
Note: overflow: hidden on the root element might not clip everything outside the Initial Containing Block if the ICB is smaller than the viewport, which can happen on mobile.
</p>

<p>
値［
`visible$v ／ `clip$v
］は、
表示域に適用される場合には［
`auto$v ／ `hidden$v
］として解釈するモノトスル。
◎
If visible is applied to the viewport, it must be interpreted as auto. If clip is applied to the viewport, it must be interpreted as hidden.
</p>

		</section>
		<section id="smooth-scrolling">
<h3 title="Smooth Scrolling: the scroll-behavior Property">3.4. 滑らかな~scroll： `scroll-behavior^p ~prop</h3>


◎名 `scroll-behavior@p
◎値 `auto$v | `smooth$v
◎初 `auto$v
◎適 `~scroll容器$
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎ア ~animate不可
◎表終

<p>
`scroll-behavior$p ~propは、
`~scroll容器$が［
次のいずれかにより~scrollされたとき
］の挙動を指定する
⇒＃
~navi／
~scroll用の~API `CSSOM-VIEW$r ／
利用者が起動したものでない`~scroll留ng$ `CSS-SCROLL-SNAP-1$r
◎
The scroll-behavior property specifies the scrolling behavior for a scroll container, when scrolling happens due to navigation, scrolling APIs [CSSOM-VIEW], or scroll snapping operations not initiated by the user [CSS-SCROLL-SNAP-1].＼
</p>

<p>
これら以外の~scroll
— 例：利用者が遂行したものなど —
は、
この~propからは影響されない。
◎
Any other scrolls, e.g. those that are performed by the user, are not affected by this property.＼
</p>

<p>
この~propが`根~要素$に指定された場合、
代わりに表示域に適用される。
◎
When this property is specified on the root element, it applies to the viewport instead.
</p>

<p class="note">注記：
~HTML `body$e 要素の `scroll-behavior$p ~propは、
【 `overflow$p とは違って，】
表示域へは`伝播しない^em。
◎
Note: The scroll-behavior property of the HTML body element is not propagated to the viewport.
</p>

<dl>
	<dt>`auto@v</dt>
	<dd>
`~scroll容器$における~scrollは、
`瞬時＠~CSSOMVIEW#concept-instant-scroll$に行われる。
◎
The scroll container is scrolled in an instant fashion.
</dd>

	<dt>`smooth@v</dt>
	<dd>
`~scroll容器$における~scrollは、
~UA定義な~~速度と~~動きにより，`滑らか＠~CSSOMVIEW#concept-smooth-scroll$に行われる。
~UAは、
~platform規約があれば それに従うベキである。
◎
The scroll container is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
</dd>
</dl>

<p>
~UAは、
この~propを無視してもヨイ。
◎
User agents may ignore this property.
</p>

		</section>
	</section>
	<section id="scrollbar-layout">
<h2 title="Scrollbars and Layout">4. ~scrollbarと~layout</h2>

		<section id="scrollbar-sizing">
<h3 title="Scrollbar Contributions to Sizing">4.1. ~sizingに対する~scrollbarの供与</h3>

<p>
要素の~boxの辺に配置される~scrollbar用に空間を予約するときは、
その空間は，~boxの［
【！内縁】`~border辺$, 【！外縁】`~padding辺$
］の合間に挿入される。
しかしながら，［
`背景~位置決め区画$, `背景~塗ng区画$
］の目的においては、
この予約される空間は，~boxの`~padding~box$の一部を成すと見なされる。
◎
When reserving space for a scrollbar placed at the edge of an element’s box, the reserved space is inserted between the inner border edge and the outer padding edge. For the purpose of the background positioning area and background painting area however, this reserved space is considered to be part of the padding box.
</p>

<div class="example">
<p>
次の文書片においては、［
`絶対的に位置され$た要素（ `aside^e ）,
背景~画像（ `article^e の背景を成す）
］どちらも~boxの右上に位置される。
◎
In the following document fragment, both an absolutely-positioned element and a background image are positioned to the top right of the box.
</p>

<pre class="lang-html">
&lt;style&gt;
  article {
    background: top right no-repeat url(circle.png);
    position: relative;
    overflow: auto; }
  aside { position: absolute; top: 0; right: 0; }
&lt;/style&gt;
&lt;article&gt;
  &lt;aside&gt;×&lt;/aside&gt;
&lt;/article&gt;
</pre>

<p>
`article^e に~scrollbarが無い場合）、
両者の位置は［
右端, 上端
］`~padding辺$が成す隅で一致することになる。
一方で，~scrollbarが在る場合、
`aside^e は，~scrollbarに隣接な右端~padding~box辺で完全に可視になる一方で、
背景~画像は，
~scrollbarで拡張された`背景~位置決め区画$の右上~隅【右端】において
~scrollbarの~~背後に押し込まれることになる。
◎
If no scrollbars are present on &lt;article&gt;, they will both coincide in the top right padding edge corner. However, if scrollbars are present then &lt;aside&gt; will be completely visible, on the right padding-box edge adjacent to the scrollbars; whereas the background image will be tucked underneath the scrollbars, in the top right corner of the scrollbar-extended background positioning area.
</p>
</div>

<p>
この予約される空間は、［
~boxが内在的に~sizeされる場合は，~boxの内容の~sizeに加算される／
他の場合は，~boxの`内容~区画$に割り当てられた空間から減算される
］。
~scrollbarの有無が~boxの~sizingに影響し得る所では、
~UAは，必要な~scrollbarは無い前提から開始して、
在るように転じたときには，~sizeを計算し直すモノトスル。
◎
When the box is intrinsically sized, this reserved space is added to the size of its contents. It is otherwise subtracted from space allotted to the content area. To the extent that the presence of scrollbars can affect sizing, UAs must start with the assumption that no scrollbars are needed, and recalculate sizes if it turns out they are.
</p>

<div class="example">
<p>
次の文書片においては、
外縁 `article^e の［
`height$p は `auto^v,
`max-height$p は `5em^v
］にされている。
内縁 `section^e の~marginの大きさは，通常は ちょうど収まる：
◎
In the following document fragment, the outer &lt;article&gt; has height: auto, but max-height: 5em. The inner &lt;section&gt; has large margins and would normally just fit:
</p>

<pre class="lang-html">
...
    article { overflow: auto; max-height: 5em;  width: max-content; }
    section { margin: 2em; line-height: 1 }
...
&lt;article&gt;
  &lt;section&gt;
    This section has big margins.【1 行lに収まる~text】
  &lt;/section&gt;
&lt;/article&gt;
</pre>

<p>
仮に `article^e には~scrollbarは必要になるとする前提から開始した場合、
`section^e の縦幅は，
1 行lの~textと~margin `2em^v の 2 倍の~~合計 `5em^v に~scrollbarの分が加算される。
それは，許容される最大~縦幅 `5em^v より大きいので、
【！it seems we made the right assumption and d1】
実際に~scrollbarが必要になる。
◎
If we assumed that &lt;article&gt; needed scrollbars, then the height of &lt;section&gt;, including the single line of text and twice 2em of margins, adds up to 5em plus a scrollbar. Since that is greater than 5em, the maximum allowed height, it seems we made the right assumption and d1 indeed needs scrollbars.
</p>

<p>
しかしながら，必要な~scrollbarは無い前提から開始するべきであり、
`article^e の内容の縦幅は，正確に最大~縦幅 `5em^v になり，
【！proving that the assumption was correct】
`article^e は~~実際に~scrollbarを有さないベキである。
◎
However, we should have started by assuming that no scrollbars are needed. In that case the content height of &lt;article&gt; is exactly the maximum height of 5em, proving that the assumption was correct and &lt;article&gt; indeed should not have scrollbars.
</p>
</div>

		</section>
		<section id="scrollbar-gutter-property">
<h3 title="Reserving space for the scrollbar: the scrollbar-gutter property">4.2. ~scrollbar用の空間の予約-法： `scrollbar-gutter^p ~prop</h3>

<p>
~UAは、［
内縁~border辺と外縁~padding辺
］の合間を成す空間を~scrollbarを表示するために予約し得る
— この空間は、
`~scrollbar側溝@
（ `scrollbar gutter^en ）と呼ばれる。
◎
The space between the inner border edge and the outer padding edge which user agents may reserve to display the scrollbar is called the scrollbar gutter.
</p>

<p>
`scrollbar-gutter$p ~propは、
`~scrollbar側溝$の有無に対する制御を
— `overflow$p ~propにより供される~scrollbarの有無を制御する能とは別々に —
作者に与える。
◎
The scrollbar-gutter property gives control to the author over the presence of scrollbar gutters separately from the ability to control the presence of scrollbars provided by the overflow property.
</p>

◎名 `scrollbar-gutter@p
◎値 `auto$v | `stable$v &amp;&amp; `both-edges$v?
◎初 `auto$v
◎適 `~scroll容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword（たち）
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、
~boxの［
`行内-始端$／`行内-終端$
］辺に配置される`~scrollbar側溝$の有無に影響する。
◎
This property affects the presence of scrollbar gutters placed at the inline start edge or inline end edge of the box.
</p>

<p>
~boxの［
`塊-始端$／`塊-終端$
］辺における`~scrollbar側溝$の有無は、
この~levelでは制御できない
— それは、
`scrollbar-gutter$p が `auto$v のときは，~boxの［
`行内-始端$／`行内-終端$
］辺に配置される`~scrollbar側溝$の有無と同じ仕方で決定される。
◎
The presence of a scrollbar gutter at the block start edge and block end edge of the box cannot be controlled in this level, and is determined the same way as the presence of scrollbar gutters placed at the inline start edge or inline end edge of the box when scrollbar-gutter is auto.
</p>

<p>
~scrollbarは、
次に挙げる 2 種に大別される：
◎
↓</p>
<ul>
	<li>
`上層~scrollbar@
（ `overlay scrollbar^en, “~~上層に重ねる” ~scrollbar）は、
既定では`内容~box$越しに配置され，`~scrollbar側溝$を作成しない。
それは、
通例的に
— その背後に内容があっても露呈されるよう —
部分的に透明になる。
その外観と~sizeは、
利用者が［
それとヤリトリしているかどうか，どうヤリトリしているか
］に基づいて変わり得る。
◎
Scrollbars which by default are placed over the content box and do not cause scrollbar gutters to be created are called overlay scrollbars. Such scrollbars are usually partially transparent, revealing the content behind them if any. Their appearance and size may vary based on whether and how the user is interacting with them.
</li>
	<li>
`古典~scrollbar@
（ `classic scrollbar^en ）は、
常に`~scrollbar側溝$内に配置され，空間を消費する。
それは、
通例的に不透明になる。
◎
Scrollbars which are always placed in a scrollbar gutter, consuming space when present, are called classic scrollbars. Such scrollbars are usually opaque.
</li>
</ul>

<p>
次については、
~UAにより定義される
⇒＃
`古典~scrollbar$, `上層~scrollbar$どちらが利用されるか,
~scrollbarの外観と~size,
~scrollbarが~boxの始端~辺, 終端~辺どちらに現れるか
◎
Whether classic scrollbars or overlay scrollbars are used, the appearance and size of the scrollbar, and whether scrollbars appear on the start or end edge of the box, is UA defined.
</p>

<p class="note">注記：
~scrollbarがどちら側に現れるかは、［
~OS規約,
`双方向性$,
他の人間工学上の考慮点
］に依存し得る。
◎
Note: Which side a scrollbar appears on may depend on operating system conventions, bidirectionality, or other ergonomic considerations.
</p>

<p>
`古典~scrollbar$の事例では、
`~scrollbar側溝$の幅【太さ】は，在るならば（下を見よ）~scrollbarの幅と同じになる。
`上層~scrollbar$の事例では、
`~scrollbar側溝$は無い。
◎
In the case of classic scrollbars, the width of the scrollbar gutter, if present (see below), is the same as the width of the scrollbar. In the case of overlay scrollbars, no scrollbar gutter is present.
</p>


<p class="note">注記：
`上層~scrollbar$用にも`~scrollbar側溝$を可能化することで取組めるような，既知な利用事例もあるが、
これまでに合意された満足な設計は無い。
これは、
将来における この~propの拡張により，取組まれ得る。
`CSS-OVERFLOW-4$r
<a href="~CSSWG/css-overflow-4/#sbg-ext">§ `scrollbar-gutter^p 用にアリな拡張</a>
を見よ。
◎
Note: There are known use cases that could be addressed by enabling scrollbar gutters for overlay scrollbars, but no satisfactory design has been agreed to so far. This could be addressed by future extensions of this property. See CSS Overflow 4 § A: Possible extensions for scrollbar-gutter.
</p>

<p>
この~propの各種 値の意味は：
◎
The values of this property have the following meaning:
</p>
<dl>
	<dt>`auto@v</dt>
	<dd>
［
`overflow$p は `scroll$v1 のとき／
`overflow$p は `auto$v1 かつ当の~boxは~overflowしているとき
］は、
`古典~scrollbar$が利用されるならば，`~scrollbar側溝$を作成して空間を消費する。
`上層~scrollbar$は空間を消費しない。
◎
Classic scrollbars consume space by creating a scrollbar gutter when overflow is scroll, or when overflow is auto and the box is overflowing. Overlay scrollbars do not consume space.
</dd>

	<dt>`stable@v</dt>
	<dd>
`overflow$p は［
`hidden$v1 ／ `scroll$v1 ／ `auto$v1
］のときは、
~boxが実際に~overflowしているかどうかに関わらず，`古典~scrollbar$用の`~scrollbar側溝$が在る。
`上層~scrollbar$は空間を消費しない。
◎
The scrollbar gutter is present for classic scrollbars when overflow is hidden, scroll, or auto, regardless of whether the box is actually overflowing. Overlay scrollbars do not consume space.
</dd>
	<dd class="note">注記：
これが影響するのは、
側溝の有無に限られ，~scrollbar自体が可視になるかどうかは変化しない。
◎
Note: This does not change whether the scrollbar itself is visible, only the presence of a gutter is affected.
</dd>

	<dt>`both-edges@v</dt>
	<dd>
`~scrollbar側溝$が~boxの［
行内-始端／行内-終端
］どちらかの辺に在ることになるならば、
反対側の辺にも，別の`~scrollbar側溝$が在るモノトスル。
◎
If a scrollbar gutter would be present on one of the inline start edge or the inline end edge of the box, another scrollbar gutter must be present on the opposite edge as well.
</dd>
</dl>

<p>
`~scrollbar側溝$の背景は、
次のいずれかに該当するときは，~paddingの拡張として塗るモノトスル
⇒＃
`~scrollbar側溝$は在るが~scrollbarは無いとき／
~scrollbarは，透明または`~scrollbar側溝$を全部的には遮らないとき
◎
When the scrollbar gutter is present but the scrollbar is not, or the scrollbar is transparent or otherwise does not fully obscure the scrollbar gutter, the background of the scrollbar gutter must be painted as an extension of the padding.
</p>

<p>
`overflow$p ~propのときと同じく，
`scrollbar-gutter$p が`根~要素$に設定されたときは、
~UAは：
◎
As for the overflow property, when scrollbar-gutter is set on the root element,＼
</p>
<ul>
	<li>
代わりに表示域に適用するモノトスル。
◎
the user agent must apply it to the viewport instead,＼
</li>
	<li>
`根~要素$自身の `scrollbar-gutter$p の使用~値は `auto$v にするモノトスル。
◎
and the used value on the root element itself is scrollbar-gutter: auto.＼
</li>
</ul>
<p>
しかしながら， `overflow$p ~propのときと違って、
~HTML `body$e 要素からは `scrollbar-gutter$p を伝播しないモノトスル。
◎
However, unlike the overflow property, the user agent must not propagate scrollbar-gutter from the HTML body element.
</p>

<div class="note">

<p>注記：
次の表tに `overflow$p と `scrollbar-gutter$p との相互作用
— どの事例で，`古典~scrollbar$用の`~scrollbar側溝$用に空間が予約されるか —
を要約する。
この表tの
⇒＃
見出し行（一行目）は `scrollbar-gutter$p 用の値を与える／
見出し列（一列目）は `overflow$p 用の値を与える
</p>

<table>
<caption>
`古典~scrollbar$用の`~scrollbar側溝$は在るべきか？
</caption>
<thead>
<tr><td><th>`auto$v <th>`stable$v
<tbody>

<tr><th>`scroll$v1
<td>在る
<td>在る

<tr><th>`auto$v1
<td>~overflowしている場合に限り，在る
<td>在る

<tr><th>`hidden$v1
<td>無い
<td>在る

<tr><th>`visible$v1
<td>無い
<td>無い

<tr><th>`clip$v1
<td>無い
<td>無い
</table>

◎
Note: The following table summarizes the interaction of overflow and scrollbar-gutter showing in which case space is reserved for a classic scrollbar’s scrollbar gutter.
◎
Should a classic scrollbar’s scrollbar gutter be present?
◎
overflow｜scrollbar-gutter｜Overflowing｜Not overflowing
scroll｜auto｜yes｜yes
｜stable｜yes｜yes
auto｜auto｜yes｜
｜stable｜yes｜yes
hidden｜auto｜｜
｜stable｜yes｜yes
visible, clip｜auto｜｜
｜stable｜｜
</div>

		</section>
	</section>
	<section id="auto-ellipsis">
<h2 title="Automatic Ellipses">5. 自動的な省略符</h2>

	<section id="text-overflow">
<h3 title="Overflow Ellipsis: the text-overflow property">5.1. ~overflow時の省略符： `text-overflow^p ~prop</h3>

<p class="trans-note">【
省略符 — `ellipsis^en （印刷用語でいう “三点リーダ” など）。
】</p>

◎名 `text-overflow@p
◎値 `clip$v | `ellipsis$v
◎初 `clip^v
◎適 `塊~容器$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎ア 離散的
◎表終

<p>
この~propは、［
`行内~内容$が［
その`塊~容器$要素の`行l~box$の終端~辺を，`行内~次元$において~overflowする
］, かつ
その塊の `overflow$p は `visible$v1 でない
］ときの描画を指定する。
◎
This property specifies rendering when inline content overflows its end line box edge in the inline progression direction of its block container element ("the block") that has overflow other than visible.
</p>

<p>
~textは、
例えば折返ngが禁則されるとき
（例えば， `white-space^p に対する `nowrap^v や, 一行分を超える長さの 単独の単語に因り），
~overflowし得る。
各種 値の意味は：
◎
Text can overflow for example when it is prevented from wrapping (e.g. due to white-space: nowrap or a single word is too long to fit). Values have the following meanings:
</p>

<dl class="valuedef">
	<dt>`clip@v （単に切取る）</dt>
	<dd>
`行内~内容$がその`塊~容器$要素を~overflowする部分は、
切取る。
文字~並びは、
部分的に描画されてもヨイ。
◎
Clip inline content that overflows its block container element. Characters may be only partially rendered.
</dd>

	<dt>`ellipsis@v （~UAの既定の省略符）</dt>
	<dd>
ellipsis 文字（ ~U2026 ）を描画して，`行内~内容$が切取られたことを表現する。
実装は、［［
言語／用字系／書字~mode
］に より適切な省略符
］, あるいは［
ellipsis 文字を可用にできないときは 3 個の~dot "..."
］で代用してもヨイ。
◎
Render an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language, script, or writing-mode appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.
</dd>
	<dd class="trans-note">【
以下に現れる語
`省略符@
（ `ellipsis^en ）は、
~UAがこの値に対し実際に描画する文字（たち）を指す（ ~U2026 に限られない）。
】</dd>
</dl>

<p>
読み易くするため、
この~prop定義においては，用語 “文字” が利用される
— 実装の目的においては、
“書記素~cluster” `UAX29$r を意味する。
◎
The term "character" is used in this property definition for better readability and means "grapheme cluster" [UAX29] for implementation purposes.
</p>

<p>
`ellipsis$v 値に対しては、
実装は，行lの終端~辺の所の［
文字／`不可分な行内~level$の要素
］を，`省略符$を収めるために必要yなだけ隠した上で、
隠されずに残った行内~内容の終端~辺に，`省略符$を配置するモノトスル。
ただし，行l上の最初の［
文字／`不可分な行内~level$の要素
］まで隠れることになる場合、
省略化せず `clip$v と同じにふるまうモノトスル。
◎
For the ellipsis value implementations must hide characters and atomic inline-level elements at the end edge of the line as necessary to fit the ellipsis, and place the ellipsis immediately adjacent to the end edge of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.
</p>

			<section id="bidi-ellipsis">
<h4 title="Bidi ellipsis examples">双向~省略符の例</h4>

<div class="example">
<p>
双向~状況において，省略符~用の部屋を作るとき どの文字が隠されるかを、
次にデモる
— それらは、
視覚的に行lの終端~辺に来る：
◎
These examples demonstrate which characters get hidden to make room for the ellipsis in a bidi situation: those visually at the end edge of the line.
</p>

<p>
見本~CSS：
◎
Sample CSS:
</p>

<pre class="lang-css">
div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}
</pre>

<p>
見本~HTML片と，基準~描画, 利用中の~browserによる描画：
◎
Sample HTML fragments, renderings, and your browser:
◎
HTML｜Reference rendering｜Your Browser 
</p>

<table><thead>
<tr><th>~HTML
<th>基準~描画
<th>利用中の~browser
<tbody>

<tr><td>`&lt;div&gt;שלום 123456&lt;/div&gt;^c
<td>
<div style="font-family:monospace">123456 ם…</div>
<td>

<div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>

<tr><td>`&lt;div dir=rtl&gt;שלום 123456&lt;/div&gt;^c
<td>
<div style="font-family:monospace">…456 שלום</div>
<td>
<div dir="rtl" style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>
</table>
</div>

			</section>
			<section id="ellipsing-details">
<h4 title="ellipsing details">省略化の詳細</h4>

<ul>
	<li>
省略化が影響するのは描画に限られる
— ~layoutや~pointer~eventの配送-法には影響しないモノトスル。
~UAは、
省略符~上の~pointer~eventも
— `text-overflow$p が `none^v であったときと同じく —
~textが省かれた要素へ向けて配送するベキである。
◎
Ellipsing only affects rendering and must not affect layout nor dispatching of pointer events: The UA should dispatch any pointer event on the ellipsis to the elided element, as if text-overflow had been none.
</li>
	<li>
省略符は、
塊に則って~styleされ，基底線に整列される。
◎
The ellipsis is styled and baseline-aligned according to the block.
</li>
	<li>
省略化が生じるのは、
相対的~位置決めや 他の~graphicな変形nの後とする。
◎
Ellipsing occurs after relative positioning and other graphical transformations.
</li>
	<li>
省略符~用の空間が足りない場合、
省略符~自身の描画を切取る
（ `clip$v 値が指定されていたときに，行l上の中立な文字†が切取られる所と同じ側で）。
【†中立（ `neutral^en ）：ハイフンなど，双向性に関して中立な文字（~Unicode仕様に定義される）。】
◎
If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself (on the same side that neutral characters on the line would have otherwise been clipped with the text-overflow:clip value).
</li>
</ul>

			</section>
			<section id="ellipsis-interaction">
<h4 title="user interaction with ellipsis">利用者による省略符とのヤリトリ</h4>

<ul>
	<li>
利用者が内容とヤリトリする所（例： 編集-／選択-／~scrollする所）では、
~UAは `text-overflow$p に対する `ellipsis$v を `clip$v として扱ってもヨイ。
◎
When the user is interacting with content (e.g. editing, selecting, scrolling), the user agent may treat text-overflow: ellipsis as text-overflow: clip.
</li>
	<li>
`省略符$を選択する際には、
省略化された~textが選択されるベキである。
省略化された~textすべてが選択された場合、
~UAは，省略符の選択を示すベキである。
省略化された~textが部分的に選択された場合の挙動は、
~UAに委ねられる。
◎
Selecting the ellipsis should select the ellipsed text. If all of the ellipsed text is selected, UAs should show selection of the ellipsis. Behavior of partially-selected ellipsed text is up to the UA.
</li>
</ul>

<div class="example" id="text-overflow-examples">

<p>
以下の各~例に、［
内容~textが~overflowするような，`塊~容器$要素
］に対する `text-overflow$p の設定をデモる。
◎
text-overflow examples
◎
These examples demonstrate setting the text-overflow of a block container element that has text which overflows its dimensions:
</p>

<p>
`div^e 用の見本~CSS：
◎
sample CSS for a div:
</p>

<pre class="lang-css">
div {
  font-family: Helvetica, sans-serif;
  line-height: 1.1;
  width: 3.1em;
  padding: 0.2em;
  border: solid .1em black;
  margin:1em 0;
  overflow: hidden;【！追加】
}
</pre>

<p>
◎
sample HTML fragments, renderings, and your browser:
</p>

<table class="grid-table" id="_overflow-ellipsis-sample"><thead>
<tr><th>
見本~HTML素片
<th>
描画~見本
◎
sample rendering
<th>
利用中の~browserによる呈示
◎
your browser
<tbody>

<tr><td><pre class="lang-html">
&lt;div style="<mark>overflow:visible;</mark>"&gt;
CSS IS AWESOME, YES
&lt;/div&gt;
</pre>
<td>
<p class="alt" hidden id="_dgm-cssisawesome">
例 1：
~textは~boxの外側にも描かれる
◎
First, a box with text drawing outside of it.
</p>

<td>
<x-text-overflow style="overflow:visible"
>CSS IS AWESOME, YES</x-text-overflow>

<tr><td><pre class="lang-html">
&lt;div style="<mark>text-overflow:clip;</mark>"&gt;
CSS IS AWESOME, YES
&lt;/div&gt;
</pre>
<td>
<p class="alt" hidden id="_dgm-cssisaweso">
例 2：
~textは~boxの外側で切取られる
◎
Second, a similar box with the text clipped outside the box.
</p>
<td>
<x-text-overflow style="text-overflow:clip"
>CSS IS AWESOME, YES</x-text-overflow>

<tr><td><pre class="lang-html">
&lt;div style="<mark>text-overflow:ellipsis;</mark>"&gt;
CSS IS AWESOME, YES
&lt;/div&gt;
</pre>
<td>
<p class="alt" hidden id="_dgm-cssisaw">
例 3：
切取られた~textを表現する省略符を伴う
◎
Third, a similar box with an ellipsis representing the clipped text.
</p>
<td>
<x-text-overflow style="text-overflow:ellipsis"
>CSS IS AWESOME, YES</x-text-overflow>

<tr><td><pre class="lang-html">
&lt;div style="<mark>text-overflow:ellipsis;</mark>"&gt;
NESTED
&lt;p style="margin:1em 0;"&gt;PARAGRAPH&lt;/p&gt;
WON’T ELLIPSE.
&lt;/div&gt;
</pre>
<td>
<p class="alt" hidden id="_dgm-nes">
例 4：
入子にされた段落を伴う~box
— `text-overflow^p は、
匿名~塊~boxへは継承される一方，
入子にされた要素へは継承されない様子をデモる
◎
Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element.
</p>
<td>
<x-text-overflow style="text-overflow:ellipsis"
>NESTED <p style="margin:1em 0;">PARAGRAPH</p> WON’T ELLIPSE.</x-text-overflow>
</table>
</div>

<p class="note">注記：
省略符が行lのどちら側に配置されるかは、
塊の `direction$p に依存する。
例えば，当の塊は
`overflow$p が `hidden^v にされていて,
右横書き（ `direction$p は `rtl^v ）の場合、
その行内~内容を `左端^em 側で切取るので，［
`text-overflow$p による省略符を `左端^em上に配置して，切取られた内容を表現する
］ことになる。
◎
Note: the side of the line that the ellipsis is placed depends on the direction of the block. E.g. an overflow hidden right-to-left (direction: rtl) block clips inline content on the left side, thus would place a text-overflow ellipsis on the left to represent that clipped content.
</p>

			</section>
			<section id="ellipsis-scrolling">
<h4 title="ellipsis interaction with scrolling interfaces">省略符と~scroll用~UIとの相互作用</h4>

<p>
この節は、
次を満たす要素に適用される
⇒
［
`text-overflow$p は `clip$v 以外
］かつ［
`overflow$p は `scroll^v
］
◎
This section applies to elements with text-overflow other than text-overflow:clip (non-clip text-overflow) and overflow:scroll.
</p>

<p>
要素の `text-overflow$p は `clip^v でない, かつ
`overflow$p は`行内~次元$において `scroll^v にされていて，
~browserが~scroll用の仕組みを供するとき
（例： 要素~上の~scrollbarや, ~swipe-scroll用の~touch~UI, 等々）、
実装には，より良い利用者~体験を供するための追加的な詳細がある：
◎
When an element with non-clip text-overflow has overflow of scroll in the inline progression dimension of the text, and the browser provides a mechanism for scrolling (e.g. a scrollbar on the element, or a touch interface to swipe-scroll, etc.), there are additional implementation details that provide a better user experience:
</p>

<p>
要素が~scrollされるとき（例： 利用者により, あるいは~DOM操作により），
要素の更なる内容が示される。
`text-overflow$p の値は、
そのふるまいに影響するベキでない
— `text-overflow$p が `clip^v 以外に設定された場合、
実装は，次に従うベキである：
◎
When an element is scrolled (e.g. by the user, DOM manipulation), more of the element’s content is shown. The value of text-overflow should not affect whether more of the element’s content is shown or not. If a non-clip text-overflow is set, then＼
</p>
<ul>
	<li>
~viewの中に更なる内容が~scrollされるに伴い，追加的な内容を
— それが何であれ —
収めるように示す。
◎
as more content is scrolled into view, implementations should show whatever additional content fits,＼
</li>
	<li>
［
`clip^v であったなら切取られる内容
］および［
`省略符$に必要yなだけ
］に限り，切落す。
◎
only truncating content which would otherwise be clipped (or is necessary to make room for the ellipsis/string),＼
</li>
	<li>
内容の~~終端まで表示できるほど十分に~scrollされたときは、
`省略符$を表示する代わりに，その部分の内容を表示する。
◎
until the element is scrolled far enough to display the edge of the content at which point that content should be displayed rather than an ellipsis/string.
</li>
</ul>

<div class="example">
<p>
次の例は、
上で述べた挙動をデモるために，
`overflow$p が `scroll^v にされた要素~上で `text-overflow$p を利用する。
◎
This example uses text-overflow on an element with overflow scroll to demonstrate the above described behavior.
</p>

<p>
見本~CSS：
◎
sample CSS:
</p>

<pre class="lang-css">
div.crawlbar {
  text-overflow: ellipsis;
  height: 2.5em;【！ 2em; 】
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border: 1em solid silver;
}
</pre>

<p>
見本~HTML素片：
◎
sample HTML fragment:
</p>

<pre class="lang-html">
&lt;div class="crawlbar"&gt;
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
&lt;/div&gt;
</pre>

<p>
見本~CSS／~HTMLのデモ：
◎
demonstration of sample CSS and HTML:
</p>

<div style="text-overflow: ellipsis; height: 2.5em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid silver;">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>
</div>

<p>
実装は、
内容が~scrollされている間は，`省略符$の描画を調整してもヨイ
（例：行lの辺ではなく，~boxの辺に整列するなど）。
◎
While the content is being scrolled, implementations may adjust their rendering of ellipses (e.g. align to the box edge rather than line edge).
</p>

			</section>
		</section>
	</section>
	<section id="priv">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<p>
この仕様が導入する新たな~privacyの懸念は無い。
◎
This specification introduces no new privacy concerns.
</p>

	</section>
	<section id="sec">
<h2 title="Security Considerations">~securityの考慮点</h2>

<p>
この仕様が導入する新たな~securityの懸念は無い。
◎
This specification introduces no new security concerns.
</p>

	</section>
	<section id="changes">
<h2 title="Changes">変更点</h2>

◎非規範的

<p class="trans-note">【
この~level 3 にて以前に定義されていた特能のうち一部は，
~level 4 へ移動されたので、
以下の記述には，この~levelには関連しないものもある
— それらには、
以下において “→ ~level 4” が付記される。
】</p>

<dl>
	<dt id="changes-since-2021-12-02">
`2021年 12月 2日 作業草案＠~TR/2021/WD-css-overflow-3-20211202/$
からの変更点
◎
Changes from the 2021-12-02 Working Draft
</dt>
	<dd>
`塊~容器$の`~scroll可能な~overflow区画$内には終端~辺の`~padding$を含めることを要求した。
これは、
これまで，［
`normal＠~CSSALIGN#valdef-justify-content-normal$v な`内容~分布$を伴う`塊~容器$
］用には任意選択~であった
— ~Web互換性の究明が待たれる。
（ `129$issue ）
◎
Require end-edge padding to be included in the scrollable overflow area of block containers; this was previously optional for block containers with normal content distribution, pending Web-compatibility investigations. (Issue 129)
</dd>
	<dd>
【→ ~level 4】
`-webkit-line-clamp$p と `line-clamp$p の各 下位propとの相互作用を より精確に定義した。
`CSS-OVERFLOW-4$r `§ 旧来のものとの互換性＠~CSSOVERFLOW4#webkit-line-clamp$ を見よ。
（ `6842$issue ）
◎
More precisely define the interaction of -webkit-line-clamp and the various line-clamp longhands. See CSS Overflow 4 § 5.1.1 Legacy compatibility. (Issue 6842)
</dd>
	<dd>
【→ ~level 4】
領域~分断は、
<code class="css">`continue$p: `discard^v</code>
に対しては，［
後続な内容の破棄することを誘発するもの
］になること
（および，他の種別の分断は，そうならないこと）
を明確化した。
そのような~boxに対し領域~分断を誘発する例を与えた。
◎
Clarified that region breaks are what trigger discarding of subsequent content for continue: discard (and that other types of breaks do not); and gave examples of what triggers a region break on such a box.
</dd>
	<dd>
<p>
小さな明確化：
◎
Minor clarifications:
</p>
		<ul>
			<li>
【→ ~level 4】
`角括弧付き範囲~記法$を利用して
`length-percentage$t 値~定義を注釈した。
◎
Annotate &lt;length-percentage&gt; value definitions using CSS bracketed range notation.
</li>
		</ul>
	</dd>

	<dt id="changes-since-2020-06-03">
`2020年 6月 3日 作業草案＠~TR/2020/WD-css-overflow-3-20200603/$
からの変更点
◎
Changes from the 2020-06-03 Working Draft
</dt>
	<dd>
`scroll-behavior$p ~propを `CSSOM-VIEW$r から この仕様へ移動した。
◎
Moved the scroll-behavior property from [CSSOM-VIEW] to this specification.
</dd>
	<dd>
以前まで `CSS-OVERFLOW-4$r にて定義されていた `scrollbar-gutter$p ~propを採用した。
◎
Adopted the scrollbar-gutter property, previously defined in [CSS-OVERFLOW-4].
</dd>
	<dd>
`overflow-clip-margin$p に各種~box辺~keywordを追加した。
（ `5801$issue ）
◎
Added box-edge keywords to overflow-clip-margin. (Issue 5801)
</dd>
	<dd>
`border-radius$p と `overflow-clip-margin$p の相互作用を明確化した。
◎
Clarified interaction of border-radius and overflow-clip-margin.
</dd>
	<dd>
［
~graphicな変形がある下での，利用者による~scrolling~gesture
］についての注記を追加した。
◎
Added note about user scrolling gestures vs. transforms.
</dd>
	<dd>
`~scroll可能な~overflow区画$の中に［
~margin, ~padding, 面積 0 の~box
］を組入れるときの要件を整備した。
（ `129$issue, `4791$issue ）
◎
Tightened up requirements around incorporating margins, padding, and zero-area boxes into the scrollable overflow area. (Issue 129, Issue 4791)
</dd>
	<dd>
~scrollbarによる~layoutに対する影響iを もっと精確に定義した。
（ `3348$issue ）
◎
More precisely defined impact of scrollbars on layout. (Issue 3348)
</dd>
	<dd>
表示域への `overflow$p の伝播を孕んでいる様々な際どい事例を取扱うようにした。
（ `3779$issue, `5913$issue ）
◎
Handle various edge cases involving overflow propagation to the viewport. (Issue 3779, Issue 5913)
</dd>
	<dd>
諸々の小さな明確化と修正点。
◎
Miscellaneous small clarifications and fixes.
</dd>

	<dt id="changes-since-2018-07-31">
`2018年 7月 31日 作業草案＠~TR/2018/WD-css-overflow-3-20180731/$
からの変更点
◎
Changes from the 2018-07-31 Working Draft
</dt>
	<dd>
~markupの誤りを修正した。
誤記を修正した。
◎
Fixed markup errors and typos
</dd>
	<dd>
様々な編集上の明確化を為して，不整合を修正した。
◎
Made various editorial clarifications and fixed inconsistencies
</dd>
	<dd>
【→ ~level 4】
`block-overflow^p を `block-ellipsis$p に改称した。
◎
Renamed block-overflow to block-ellipsis
</dd>
	<dd>
【→ ~level 4】
`text-overflow$p は、
~overflowしている`塊~overflow省略符$に影響するものと定義した。
◎
Define text-overflow to affect an overflowing block overflow ellipsis
</dd>
	<dd>
【→ ~level 4】
行lより長い`塊~overflow省略符$の挙動を定義した。
◎
Define the behavior of a block overflow ellipsis that is longer than the line
</dd>
	<dd>
【→ ~level 4】
`block-ellipsis$p と［
`first-line^pe ／ `first-letter^pe
］との相互作用を定義した
◎
Define interaction of block-ellipsis and ::first-line / ::first-letter
</dd>
	<dd>
【→ ~level 4】
<code class="css">`continue$p: `discard^v</code>
を伴う要素の内在的~sizeを調整した。
◎
Adjust the intrinsic size of elements with continue: discard
</dd>
	<dd>
【→ ~level 4】
`塊~overflow省略符$を~lay-outする方法を定義した。
◎
Define how to layout the block overflow ellipsis
</dd>
	<dd>
【→ ~level 4】
既存の内容との互換性を得るため，
`-webkit-line-clamp$p の旧来の挙動を定義した。
◎
Define the legacy behavior of -webkit-line-clamp for compatibility with existing content
</dd>
	<dd>
終端~paddingは、
~scroll可能な~overflow区画~内に含まれるものと定義した
— 塊~容器~用は除いて
（~web互換性の課題に因り、それを取扱うのは，もっと込み入っている）。
◎
Define that end padding is included in the scrollable overflow area except for block containers (which are more tricky to handle, due to web-compat issues)
</dd>
	<dd>
［
~flex駒／格子~駒
］の~marginは、
~scroll可能な~overflow内に含まれるものと定義した。
◎
Define that Margins of flex and grid items are included in scrollable overflow
</dd>
	<dd>
`overflow-*^p 値は、
~boxを生成しない要素からは伝播しないものとした。
◎
Do not propagate overflow from boxless elements
</dd>
	<dd>
“~scroll可能な~overflow領域”
を
“~scroll可能な~overflow区画”
に改称した。
◎
Rename 'scrollable overflow region' to 'scrollable overflow area'
</dd>
	<dd>
`overflow-clip-margin$p ~propを導入した。
◎
Introduce the overflow-clip-margin property
</dd>

	<dt id="old-changes">
`2018年 7月 31日 作業草案＠~TR/2018/WD-css-overflow-3-20180731/$
に先立つ変更点
◎
Changes Prior to the 2018-07-31 Working Draft
</dt>
	<dd>
<p>
次に挙げる変更~logから見出せる：
◎
Changes predating the publication of the 2018-07-31 Working Draft can be found in the following change logs:
</p>
		<ul>
			<li>
`2017-08-02 〜 2018-07-31＠https://github.com/w3c/csswg-drafts/commits/main?path=css-overflow-3&amp;until=2018-07-31$
◎
from 2017-08-02 to 2018-07-31
</li>
			<li>
`2015-01-27 〜 2017-08-01＠https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs$
◎
from 2015-01-27 to 2017-08-01
</li>
			<li>
`2013-03-28 〜 2015-01-27＠https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html$
◎
from 2013-03-28 to 2015-01-27
</li>
			<li>
`2012-07-31 〜 2013-03-27＠https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html$
◎
from 2012-07-31 to 2013-03-27
</li>
		</ul>
	</dd>
</dl>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgments">謝辞</h2>

<p>
とりわけ、
次の方々からの~feedbackに：
</p>

<p lang="en">
Thanks especially to the feedback from
Rossen Atanassov,
Bert Bos,
Tantek Çelik,
John Daggett,
Daniel Glazman,
Vincent Hardy,
Håkon Wium Lie,
Peter Linss,
Robert O’Callahan,
Florian Rivoal,
Alan Stearns,
Steve Zilles,
and all the rest of the `www-style＠https://lists.w3.org/Archives/Public/www-style/$ community.
</p>

	</section>
</main></div>