How to perform text distribution on a line

Question

How to perform text distribution on a line

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I have a detail page where the title of the product when resizing the browser or seen on a mobile device the text is completely aligned to the left, I would like the alignment to remain but that text be better distributed, the structure where the title is is this:

 <div class="one-fourth-pers column-last"><h3 class="entry-title"><?php echo $row_rsProdutos['descricao']; ?></h3></div>

    .one-fourth-pers {
    width: 40.5%;
    float:left; 
    /*max-width: 220px;*/
}

When you try to change the width the whole content is thrown down. The page can be seen here: Details Page

css3

asked by anonymous 24.02.2015 / 18:21

2 answers

2

Use the text-align - MDN property.

p {
  padding: 4px 0;
  width: 100%
}

.direita { text-align: right }
.esquerda{ text-align: left  }
.centralizado { text-align:center }
.justificado { text-align: justify }

<p class='direita'><b>A direita:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='esquerda'><b>A esquerda:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='centralizado'><b>Centralizado:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

<p class='justificado'><b>Justificado:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et vulputate diam. Fusce placerat magna nec tellus consequat, a fermentum tellus tincidunt. Sed sed pretium mi. Vivamus efficitur consectetur tortor at pharetra. Etiam id rutrum nisi. Ut elementum lorem ultricies ante tincidunt placerat. Aenean eget ex vitae leo consequat volutpat interdum vel sapien. Phasellus vitae mi ipsum.</p>

24.02.2015 / 18:32

Wanted to show an alert after a form is submitted, PHP, JAVASCRIPT, HTML, AJAX Remove rows from numpy array

score 3 · Accepted Answer

You can use media-query when the page is to be broken into multiple lines. On your page, media-query already appears to exist for screens smaller than 767px :

@media screen and (max-width: 767px) {
  // …
}

The problem can be solved by adding a rule like:

@media screen and (max-width: 767px) {
  .one-fourth-pers {
    width: 100%;
  }
}