Text alignment

Asked

Viewed 651 times

0

I’m trying to get a text to appear in line. This text is in a ruby variable on Rails. As follows:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 400 }'>

 <div class="col-12" style="width: 250px;height: 350px; padding: 0;margin: 0;margin-right: 100px;text-align: center;">  

   <div class="col-12 col-no-left">
     <a class="service-card" href="/servico/<%= service.permalink %>">
     <h3 class="title" style="text-align: center;"><%= service.name %></h3>
     <p class="description" style="text-align: justify;"><%=service.description.truncate(250).html_safe  %>
    <p class="btn">ver mais</p></p>
    <span><%= service.categories.map(&:name).join(',') %></span>
                            </a>
                        </div>
                </div>

The text is not justified! Can you help me? Thank you!

html css

  • You have a text-align: center; centralizing the content of the div. You want to centralize or justify?

  • ruby? kindness puts ruby tags, I think I’d better remove text-align: center; and see before @bfavaretto said.

  • @Kingrider I removed the ruby tag because the doubt is not about ruby (although the code also uses this language).

  • You need to see if the paragraph is occupying the width of the upper div. It may be that the text is justified, but its "box" is smaller and aligned to the left. Add a border: 1px solid red in it to see better (or use your browser inspector to view the element).

1 answer

0

From what I understand you want to justify the text that will be in the class description.

In the case of this code line:

<p class="description" style="text-align: justify;"><%=service.description.truncate(250).html_safe  %>

As the text is not being justified, try to altar the part style="text-align: justify; for style="text-align: justify !important;".

If this doesn’t work, post your code complete with the css for a more detailed analysis.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.