CSSのボタンとテキストが重複しないようにしますか？

Question

私はWordpressサイトで作業していますが、まだまだWebデザインの新しいものです。

私はいくつかの列で構成されたモジュールを持っています。各モジュールには、タイトル、テキスト抜粋（長さは単語の設定量です）、そのテキストの抜粋のすぐ下にあるボタン。単語の長さが可変であるため、このモジュールの標準バージョンは、愚かに見える各ボックスの高さが異なります。

すべてのボックスを同じ高さにして、ボックスの中央近くにあるボタンを設定したいと思います。ボタンを固定位置に設定して、これを達成しようとした後、微妙に悩まされていましたが、テキストの抜粋に一定の高さを設定し、ボタンの位置をそのように制御することができました。

悲しいことに、それはまだ私が望むように動作していません。標準的な見た目では素晴らしいようですが、ブラウザのウィンドウを小さくすると、設定した高さで与えられた余裕が小さくなりすぎて（高さを8emに設定します）、ボタンがテキストと重なるようになります。これはプラグインのあらかじめ定義されたモジュールなので、生成方法については何も変更できません。実際に変更できるのはカスタムCSSルールを追加することだけです。

画像：

私が前に::使用して、明確な修正と呼ばれるものを聞いたが、私はそれをGoogleで検索するとき、彼らは唯一の要素を維持するからであったようにそれが見えました上からではなく左から右にスクロールします。 @mediaとscreen widthを使用しているすべての要素に対してCSSルールを一括して追加する必要はありません。私はむしろそれを行うにはスマートな方法が必要です。 1つはありますか？

読んでいただきありがとうございます！ここ

Answer 1

だけのカップルのオプション：

<?php 
echo wp_trim_words(get_the_content(), 40, '...'); 
?> 

Source

しかし、あなたができない場合：私はあなたがそれを行うことができる方法の一つだと思うと、何のトラブルがwp_trim_words（）を使用していない持って

本当にそこまでアクセスすることができます（少なくとも、ページ内のボックスを配置するコードを読むことはできますか？）。

HTH！

Answer 2

フレックスボックスを使用する必要があるかもしれませんが、これを使用してどのように修正する必要があるのか​​をご理解いただければ幸いです。

.things { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    flex-flow:row wrap; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items:flex-end; 
 
} 
 

 
.thing { 
 
    border:1px solid black; 
 
    padding: 10px; 
 
    margin:5px; 
 
    flex:1 0 250px; 
 
    min-width:250px; 
 
    max-width:300px; 
 
    background:white; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items:center; 
 
} 
 

 
.thing h3{ 
 
text-align:center; 
 
color:red; 
 
} 
 

 
.thing small{ 
 
margin:5px; 
 
display:block; 
 
height:150px; 
 
overflow-y:hidden; 
 
} 
 

 
.thing button{ 
 
margin-top:10px; 
 
background:red; 
 
border:2px solid white; 
 
border-radius:5px; 
 
flex:1 0 30px; 
 
min-width:50px; 
 
max-width:80px; 
 
color:white; 
 
height:30px; 
 
}

<div class="things"> 
 
    <div class="thing"> 
 
    <h3>AABCDEH</h3> 
 
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small> 
 
    <button>BUTTON</button> 
 
    </div> 
 
    <div class="thing"> 
 
    <h3>AABCDEH</h3> 
 
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat., sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</small> 
 
    <button>BUTTON</button> 
 
    </div> 
 
    <div class="thing"> 
 
    <h3>AABCDEH</h3> 
 
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small> 
 
    <button>BUTTON</button> 
 
    </div> 
 
    <div class="thing"> 
 
    <h3>AABCDEH</h3> 
 
    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small> 
 
    <button>BUTTON</button> 
 
    </div> 
 
    
 
</div>