8000 Hotfix: New Tab 제목의 글자 넘침을 방지한다 by guesung · Pull Request #17 · guesung/Web-Memo · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Hotfix: New Tab 제목의 글자 넘침을 방지한다 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Sep 15, 2024
Merged

Hotfix: New Tab 제목의 글자 넘침을 방지한다 #17

merged 1 commit into from
Sep 15, 2024

Conversation

guesung
Copy link
Owner
@guesung guesung commented Sep 15, 2024

PR의 목적

image

제목의 글씨가 길 경우 위와 같은 이슈가 있어 이를 해결하였습니다.

작업 목록

tailwindcss에서 line-clamp-2옵션은 아래 css속성과 같습니다.

overflow: hidden; // 넘칠 경우 숨긴다.
display: -webkit-box; // WebKit 기반 브라우저(Chrome, Safari 등)에서 사용되는 flexbox의 구버전
-webkit-box-orient: vertical; // 내부 아이템들이 세로 방향으로 쌓이도록 설정
-webkit-line-clamp: 2; // 텍스트의 라인 수를 2로 제한

즉, 제목이 넘넘칠 경우, 두 줄까지 보여지고 그 이후로는 ...처리가 됩니다.

After

image

@guesung guesung self-assigned this Sep 15, 2024
@notion-workspace Notion Workspace
Copy link

예상치 못한 버그 : 제목이 길 때

@guesung guesung merged commit 078c0fc into master Sep 15, 2024
3 checks passed
@guesung guesung deleted the hotfix/fix-the-title-overflow branch September 15, 2024 04:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JeongBin0227 JeongBin0227 Awaiting requested review from JeongBin0227

Assignees

@guesung guesung

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@guesung
0