Skip to content
loading...

The way better than 'string'.truncate(3) in Rails, If it's responsive website.

twitter logo github logo ・1 min read  

Usual Way

We could choose this way. It is fine if it's not for a responsive website.

<%= @album.name.truncate(16) %>

Problem Situation

I have a responsive website. I should truncate the string at the client side but not the server-side.

Solution

There is a way to truncate string in CSS.

.truncate-title {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  <ul class="navbar-nav mr-auto truncate-title">γ€€
    <li class="nav-item">
      <span class="navbar-text">
        <%= yield(:header_title) if content_for?(:header_title)%>
      </span>
    </li>
  </ul>

Image

Alt Text

twitter logo DISCUSS (2)
markdown guide
 

Another option..... text-truncate is a standard Bootstrap class.

<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>

getbootstrap.com/docs/4.0/utilitie...

 

I didn't know that. it's a very useful class! I remember it. Thank you for the comment :D

Classic DEV Post from Nov 14 '19

Share your CSS knowledge

Today I learnt about the :placeholder-shown pseudo-selector thanks to Daniel’s Tweet....

n350071πŸ‡―πŸ‡΅ profile image
Ruby Web Developer. Freelancer. Tokyo.

Hey there reader...

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❀️