I'm creating a product detail page. In description, I have a text that talks about the product. When breaking the line, I want it to start from the first word of the description. In the photos, there is my example and the example of how I want it to look

html:

<div >
<div >    
    {%if produto.image %}
        <img  src='/media/{{produto.image}}'>
    {% else%}
        <img  src="{% static '/img/not-found-product.jpg' %}">
    {%endif%}
</div>
<div >
    <h1>{{ produto.produto_nome }}</h1>
    <hr>       
    <h2>R${{ produto.preco }}</h2>
    <p >Descrição</p>
    <span class='p-text-descricao'>{{produto.descricao}} asdasdasd as d asdasdasdasdasdasa s asdasd asd sads </span>
</div>

.p-descricao{
 font-weight: bold;
 font-size: 20px;
 display: inline;
 padding-right: 50px;
 color: #565656;
}

.p-text-descricao{
   color: #4f4f4f;

}

CodePudding user response：

You can wrap both the <p> and <span> tags with a div with the following css:

.wrapper {
  display: flex;
  align-items: baseline;
}

Working example:

.wrapper {
  display: flex;
  align-items: baseline;
}

.p-descricao{
 font-weight: bold;
 font-size: 20px;
 display: inline;
 padding-right: 50px;
 color: #565656;
}

.p-text-descricao{
   color: #4f4f4f;
}

<div >
    <p >Descrição</p>
    <span class='p-text-descricao'>gfdsgfdsgfdsgfdsgfdgfdsgfdsgfdssadsafdgfdsagfdgfdgfsdsasasasa asdasdasd as d asdasdasdasdasdasa s asdasd asd sads </span>
</div>

CodePudding user response：

Wrap your p and span in a wrapper div and give them display:flex properties so that they are shown in a row side by side

CodePudding user response：

1. Wrap <p> and <span> by a <div>
2. Set the display style to display: flex;.
3. Use justify-content: space-between; to space two children.
4. Finally, use align-items: baseline; to vertically align the chilren tags.

<div >
    <p >Descrição</p>
    <span class='p-text-descricao'>asdasdasd as d asdasdasdasdasdasa s asdasd asd sads </span>    
</div>

.p-attribute-group {
    width: 50%;
    /* You may need to modify width to fit your project */

    display: flex;
    /* flex-direction: row; 
    default flex-direction is row, so it's not neccessary 
    to write this line if you need row flex
    */

    justify-content: space-between;
    align-items: baseline;
    /* 
    to make sure children is vertically aligned
    when flex-direction is row
    */
}

The screenshot is here