Help us understand the problem. What is going on with this article?

rails_autolinkのリンクのはみ出し部分の折り返し

More than 1 year has passed since last update.

はじめに

私のポートフォリオをスマホで見ているときにリンクがはみ出でいることに気が付きました。↓
gemの'rails_autolink'を使っています。

auto_link.png

最終的なのコード

simple_formatでやってみましたが、リンクの折返し方がわからず、また、複数行改行しても反映されなかったため、以下のようにsimple_formatを使わずにヘルパーを使いました。
リンクの折返しは最終的にクラスを与えて、cssで解決しました。
参考↓↓↓
長いURLが折り返してくれない!URLを折り返させるCSS

views/blogs/_blog.html.erb
<%= auto_link(br(blog.body), :html => { :target => '_blank', :class => 'wrapper_link' }) %>
helpers/application_helper.rb
def br(str)
  h(str).gsub(/\R/, '<br>').html_safe
end

hはhtml_escapeのエイリアスみたいです。知らんかった😅
scivolaさんから教えてもらいました。

assets/stylesheets/application.scss
.wrapper_link {
  word-break: break-all;
}

auto_link2.png

ちゃんと折り返しました😆
リンクの色を変更していてわかりずらいですが...

sakakinn
主にRailsについて記事を投稿しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away