구현 내용

以前に投稿したコメント機能実装の記事 그럼, 전하지 못한 코멘트 기능으로 일어날 수 있는 문제점과 그 해결 방법을 정리해 보았습니다.

해결할 문제 목록

개행 문제

반 영숫자 연속 문자로 인한 돌출 문제

개행 문제(미리 보기)

before

after

반영숫자의 연속 문자에 의한 돌출 문제(미리 보기)

before

after

환경

macOS Big Sur 11.2.3ruby: 2.7.2rails: 6.1.3jQueryテンプレートエンジン: slimレイアウト: bootstrap4

개행 문제 해결

개행해도 반영되지 않고, 문자가 계속되어 표시되어 버리는 문제로부터 해결해 갑니다.

app/views/comments.hide_comments.html.slim

 = comment.comment # before

 = simple_format(comment.comment) # after

Rails 의 헬퍼 메소드인 simple_format 를 사용하는 것으로, 코멘트를 이하의 조건으로 정형해, 개행되게 됩니다.

문자열을 <p>로 묶습니다

개행에는 <br /> 를 부여

연속적인 개행은 </p><p> 을 부여

영숫자의 연속 문자에 의한 돌출 해법

일본어의 경우, 単語の途中でも自動で改行される 입니다만, 영숫자의 경우, 표시 범위를 넘는 연속하는 긴 것은 改行されずはみ出してしまいます .

app/assets/stylesheets/application.scss

body {
  // 半角英数折返しの設定
  word-wrap: break-word;
  overflow-wrap: break-word;
}

CSS word-breakプロパティ를 사용하고 값을 break-word 합니다. 또, overflow-wrap 는 word-wrap 의 낡은 명칭으로, 서포트되어 있지 않은 브라우저도 있으므로, 병기하는 것이 좋은 것 같습니다.

마지막으로

이상으로 코멘트 기능으로 자주 있는 문제의 해결 방법이었습니다!

실은 포트폴리오 완성 후에 리뷰회를 실시했습니다만, 그 때 지적해 주어, 처음으로 눈치챈 느낌이었습니다^^;

잘못된 부분이나 알기 어려운 부분이 많이 있을까 생각합니다.
그 때는, 부담없이 코멘트 받을 수 있으면 다행입니다.

끝까지 봐 주셔서 감사합니다!