2017-12-11 19 views
0

<td>にはネストされた<p>があります。テキストが最大長を超えると、新しい行の残りのテキストが右から左に印刷されます。 That;s an exampleテキストを新しい行で左側に表示するにはどうすればよいですか?

これをどのように修正すれば、新しい行が右から左に印刷されますか?使用

.group { 
 
    border: 2px solid #FFCC00; 
 
    min-width: 250px; 
 
    width: 32.85%; 
 
    margin-bottom: 5px; 
 
    margin-left: 5px; 
 
    padding: 3px; 
 
    float: left; 
 
} 
 

 
.group article { 
 
    padding: 5px; 
 
    max-height: 350px; 
 
    overflow: auto; 
 
} 
 

 
.group article table { 
 
    width: 100%; 
 
    border-spacing: 7px; 
 
}
<div class="group"> 
 
    <article> 
 
    <header> Links</header> 
 
    <hr/> 
 
    <section> 
 
     <table> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <p><a href="example.com/" target="_blank">Click here</a></p> 
 
      </td> 
 
      <td> 
 
       <p>Description </p> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </section> 
 
    </article> 
 
</div>

+0

ただ、新しい行、または左から右にすべてのテキスト? – Djave

+0

Djave、すべてのテキスト。今すぐ新しい行が右側から始まり、左にプッシュします – Anthony

答えて

1

text-align: right; 

は、テキストが、あなたの例のように、右側に合わせるようになります は、ここで私が持っているコードです。

.group { 
 
    border: 2px solid #FFCC00; 
 
    min-width: 250px; 
 
    width: 32.85%; 
 
    margin-bottom: 5px; 
 
    margin-left: 5px; 
 
    padding: 3px; 
 
    float: left; 
 
} 
 

 
.group article { 
 
    padding: 5px; 
 
    max-height: 350px; 
 
    overflow: auto; 
 
} 
 

 
.group article table { 
 
    width: 100%; 
 
    border-spacing: 7px; 
 
} 
 

 
td.right p{ 
 
    text-align:right; 
 
}
<div class="group"> 
 
    <article> 
 
    <header> Links</header> 
 
    <hr/> 
 
    <section> 
 
     <table> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <p><a href="example.com/" target="_blank">Click here</a></p> 
 
      </td> 
 
      <td class="right"> 
 
       <p>Description lorem ipsum dollar sit amet</p> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </section> 
 
    </article> 
 
</div>

関連する問題