如何對齊文本？

Question

我正在創建一個產品詳細信息頁面。 在描述中，我有一篇關於產品的文字。 斷線時，我希望它從描述的第一個單詞開始。 在照片中，有我的例子和我希望它看起來如何的例子

html：

<div class="row">
<div class="col">    
    {%if produto.image %}
        <img class="img-produto" src='/media/{{produto.image}}'>
    {% else%}
        <img class="img-produto" src="{% static '/img/not-found-product.jpg' %}">
    {%endif%}
</div>
<div class="col">
    <h1>{{ produto.produto_nome }}</h1>
    <hr>       
    <h2>R${{ produto.preco }}</h2>
    <p class="p-descricao">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;

}

Answer 1

您可以使用具有以下 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 的 div 包裝<p>和<span>標記：

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

工作示例：

 .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 class="wrapper"> <p class="p-descricao">Descrição</p> <span class='p-text-descricao'>gfdsgfdsgfdsgfdsgfdgfdsgfdsgfdssadsafdgfdsagfdgfdgfsdsasasasa asdasdasd as d asdasdasdasdasdasa s asdasd asd sads </span> </div>

Answer 2

將您的p和span包裝在一個包裝器div中，並為它們提供display:flex屬性，以便它們並排顯示在一行中

Answer 3

1. 用<div>包裹<p>和<span> >
2. 設置顯示樣式為display: flex; .
3. 使用justify-content: space-between; 隔開兩個孩子。
4. 最后，使用align-items: baseline; 垂直對齊兒童標簽。

<div class="p-attribute-group">
    <p class="p-descricao">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
    */
}

截圖在這里