2nd/10_Wiki/Topic_CSS/CSS_Text_Effects.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-text-effects	CSS Text Effects	Frontend	draft	conceptual		text-overflow word-wrap word-break writing-mode CSS text effects		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools text-effects text-overflow typography	https://www.w3schools.com/css/css3_text_effects.asp

CSS Text Effects

🎯 한 줄 통찰 (One-line insight)

CSS text-effect properties control how text behaves at its boundaries — signaling overflow (text-overflow), breaking long words (word-wrap/word-break), and orienting lines horizontally or vertically (writing-mode). [S1]

🧠 핵심 개념 (Core concepts)

• text-overflow — specifies how overflowed content that is not displayed should be signaled to the user. [S1]
• text-overflow prerequisites — it relies on white-space: nowrap; and overflow: hidden; being set. [S1]
• word-wrap — allows long words to be broken and wrapped onto the next line. [S1]
• word-break — specifies line breaking rules for non-CJK scripts; values include normal, break-all, and keep-all. [S1]
• writing-mode — specifies whether lines of text are laid out horizontally or vertically. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Overflow-signal pattern — white-space: nowrap; overflow: hidden; text-overflow: clip | ellipsis;. [S1]
• Long-word-wrap pattern — word-wrap: break-word; to break unbreakable words. [S1]
• Break-rule pattern — word-break: break-all; to break at any character. [S1]
• Orientation pattern — writing-mode: vertical-rl; to lay text vertically. [S1]

📖 세부 내용 (Details)

CSS Text Overflow [S1] The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It works with white-space: nowrap; and overflow: hidden;.

Clipped content:

p.test1 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

Ellipsis:

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS Word Wrapping [S1] The word-wrap property allows long words to be broken and wrapped onto the next line:

p {
  word-wrap: break-word;
}

CSS Word Breaking [S1] The word-break property specifies line breaking rules:

p.test1 {
  word-break: normal;
}

p.test2 {
  word-break: break-all;
}

CSS Writing Mode [S1] The writing-mode property specifies whether lines of text are laid out horizontally or vertically:

p.test1 {
  writing-mode: horizontal-tb;
}

span {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

CSS Text Effect Properties reference [S1] The page includes a table listing the text-effect properties: text-justify, text-overflow, word-break, word-wrap, and writing-mode, each with a brief description of its function.

🛠️ 적용 사례 (Applied in summary)

The page's own demonstrations (p.test1/p.test2, span, and p elements showing clip/ellipsis overflow, word wrapping, word breaking, and writing modes) serve as the applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Truncate with ellipsis (language: CSS):

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Break long words:

p {
  word-wrap: break-word;
}

Vertical text:

span {
  writing-mode: vertical-rl;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• text-overflow: clip vs ellipsis — clip simply cuts off the overflowed text; ellipsis signals the truncation with a "…". Both require white-space: nowrap; and overflow: hidden;. [S1]
• word-wrap vs word-break — word-wrap: break-word breaks long words only when needed to wrap; word-break: break-all breaks between any characters. [S1]
• writing-mode horizontal-tb vs vertical-rl — choose horizontal-tb for normal horizontal flow and vertical-rl for vertically laid-out lines. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Text Shadow Effects, CSS Custom Fonts, CSS Box Shadow
• 참조 맥락: Referenced when controlling how text truncates, wraps, breaks, or orients in constrained layouts.

📚 출처 (Sources)

• [S1] W3Schools — CSS Text Effects — https://www.w3schools.com/css/css3_text_effects.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Text Effects" page (Astra wiki-curation, P-Reinforce v3.1 format).