您可以创建两个div，一个包含截断文本，另一个包含完整文本，如果用户单击Read More，则隐藏第一个，显示第二个。Read Less：

<% if @major.glance.size > 250 %>
  <span class="truncated-paragraph-<%= @major.id %>">
    <%= truncate @major.glance, length: 250 %>
  </span>
  <span class="normal-paragraph-<%= @major.id %>" style="display: none;">
    <%= @major.glance %>
  </span>
  <a href="#" class="read-more-<%= @major.id %>">Read More</a>
  <a href="#" class="read-less-<%= @major.id %>">Hide</a>
<% else %>
  <%= @major.glance %>
<% end %>

<script type="text/javascript">
  $('[class^="read-more"]').click(function(element) {
    element.preventDefault()
    $(`.truncated-paragraph-${elId($(this))}`).hide()
    $(`.normal-paragraph-${elId($(this))}`).show()
  })

  $('[class^="read-less"]').click(function(element) {
    element.preventDefault()
    $(`.normal-paragraph-${elId($(this))}`).hide()
    $(`.truncated-paragraph-${elId($(this))}`).show()
  })

  function elId(element) {
    let elClassName = element.attr('class').split('-')
    return elClassName[elClassName.length - 1]
  }
</script>

字符串
例如：

$('[class^="read-more"]').click(function(element) {
  element.preventDefault()
  $(`.truncated-paragraph-${elId($(this))}`).hide()
  $(`.normal-paragraph-${elId($(this))}`).show()
})

$('[class^="read-less"]').click(function(element) {
  element.preventDefault()
  $(`.normal-paragraph-${elId($(this))}`).hide()
  $(`.truncated-paragraph-${elId($(this))}`).show()
})

function elId(element) {
  let elClassName = element.attr('class').split('-')
  return elClassName[elClassName.length - 1]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="truncated-paragraph-1">
  Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo ...
</span>
<span class="normal-paragraph-1" style="display: none;">
  Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo iaculis, blandit dui. Suspendisse sem mauris, maximus quis porta elementum, fermentum in dolor. Curabitur egestas arcu ante. Praesent a efficitur leo. Proin molestie turpis in sapien porta varius. Sed nisl enim, blandit ac orci in, iaculis consectetur tellus.

Quisque sapien felis, gravida in leo eget, dictum tempus felis. Ut pulvinar ex nisi, et rutrum leo dignissim at. Integer facilisis facilisis odio. Quisque consequat, ex eu sodales posuere, orci tellus accumsan justo, vitae finibus turpis turpis et tortor. Praesent luctus consequat tortor vel egestas. Suspendisse finibus interdum varius. Curabitur facilisis aliquet diam ac aliquet. Phasellus in felis placerat, gravida velit at, pulvinar nulla. Mauris ut faucibus felis, vitae semper elit. Aenean vel tincidunt leo. Donec varius est a hendrerit eleifend. Maecenas iaculis porta tortor imperdiet blandit. Praesent fermentum mauris metus, eu pulvinar lectus euismod vitae.
</span>
<a href="#" class="read-more-1">Read More</a>
<a href="#" class="read-less-1">Hide</a>

的数据

将内部if部件更改为：

<div class='textControl'><%= truncate(@major.glance, length: 250) %></div>
<div class='textControl' style='display:none;'><%= @major.glance %></div>
<%= link_to '...Read more', '', class: "read-more-#{@major.id} textControl" %>
<%= link_to '...Hide more', '', class: "read-more-#{@major.id} textControl" style='display:none;' %>
<script>
  $('.read-more-<%= @major.id %>').on('click', function(e) {
    e.preventDefault();
    $('.textControl').toggle();
  })
</script>

字符串
只是一个侧记。这不是最好的办法。内联JavaScript是一种代码气味。它应该被提取到一个单独的文件，并以通用的方式编写。你可以使用jQuery的siblings方法只隐藏同级对象，而不是所有textControl对象。

下面是一个通用的解决方案，使用可以放在演示器中的单独方法。变量str是可能很长的文本输入。

def readmore_item(str)
  return str if str.length < 200

  tag.div(readmore_whole(str) + readmore_part(str),
          class: 'readmore-item')
end

def readmore_whole(str)
  tag.div(str.html_safe + readmore_link('Show less'),
          class: 'readmore-whole', style: 'display:none;')
end

def readmore_part(str)
      tag.div(str.truncate(180, separator: /\s/).html_safe +
              readmore_link('Show more'),
      class: 'readmore-part')
end      

def readmore_link(link_txt)
  tag.span(link_to(link_txt, '#', class: 'readmore-link'),
           style: 'white-space:nowrap;')
end

字符串
这里是JavaScript。你应该让它在页面加载时触发。

function readMore() {
  $('.readmore-item a.readmore-link').on('click', function(e) {
    e.preventDefault();
    parent = $(this).parents('.readmore-item');
    parent.find('.readmore-part').toggle(400);
    parent.find('.readmore-whole').toggle(400);
  });
};

型