Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[検討] word-break: keep-all用Property Class（-wdb:keep）の追加

Open Beginner friendly
  • Is something wrong?
#363 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
65/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by reading the commented-out wordbreak proposal in packages/lism-css/config/defaults/props.ts and the commented-out word-break row in the docs Property Class list. The issue proposes a wdb group with keep: keep-all and all: break-all, used as -wdb:keep. Done means the Property Class is available and documented, with keep-all applied only where explicitly requested.

Written by the indexing model from the issue text.

Description

将来的に検討

概要

word-break: keep-allを局所的に指定するProperty Classとして、-wdb:keepの追加を検討する。

背景

日本語の見出し・ボタン・短いラベルなどで、意図しない位置で文字が細かく折り返されるのを避けたい場面がある。

現在はreset側で以下の文章折り返し方針がある。

word-break: normal;
line-break: strict;
overflow-wrap: anywhere;

このグローバル方針はレイアウト崩れ防止として妥当だが、特定の要素だけword-break: keep-allを指定したいケースがある。

方針案

Property Classとして以下を追加する。

wdb: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } }

利用例:

<h2 class="-wdb:keep">...</h2>

命名メモ

  • wbもword-breakの省略として読めるが、wは既にwidthやwriting-mode系で使われている。
  • 安全寄りにwordをwdグループとして扱うなら、word-breakはwdbが自然。
  • 将来word-spacingを追加する場合もwdsにできる。
  • 既存のwm（writing-mode）は自然な省略で、変更すると既存API破壊になるため維持する。

注意点

keep-allは狭い幅でoverflowを起こしやすいため、resetやset系ではなく、必要箇所にだけ指定するProperty Classとして扱うのがよさそう。

関連箇所

  • packages/lism-css/config/defaults/props.tsにコメントアウトされたwordbreak案がある。
  • docsのProperty Class一覧にもコメントアウトされたword-break行がある。
Dominant language
TypeScript
Stars
283
Forks
8
Avg merge
6h 37m
Merged PRs (30d)
15

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from lism-css/core

All issues in lism-css/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.