버튼이 CSS의 텍스트와 겹치지 않도록 하시겠습니까?

Question

저는 Wordpress 사이트에서 일하고 있습니다. 아직 모든 종류의 웹 디자인에 익숙합니다.

여러 개의 열로 구성된 사전 정의 된 모듈이 있습니다. 각 모듈에는 제목, 텍스트 발췌 록 (길이가 설정된 단어 수) 및 해당 텍스트 발췌 바로 아래에있는 버튼으로 구성됩니다. . 변수의 단어 길이 때문에이 모듈의 표준 버전은 바보처럼 보이는 각 상자마다 높이가 다릅니다.

모든 상자를 동일한 높이로 가져오고 상자 하단의 중앙에 단추를 설정하고 싶습니다. 이 버튼을 고정 위치로 설정하여 끔찍하게 조율하는 것을 시도한 후에, 텍스트 발췌 부분에 고정 높이를 설정하고 버튼의 위치를 ​​그렇게 조절할 수 있음을 깨달았습니다.

슬프게도 내가 원하는 방식으로 작동하지 않습니다. 표준보기에서는 좋아 보이지만 브라우저 창을 작게 만들면 설정 높이로 주어진 여가 시간이 너무 짧아집니다 (높이를 8em로 설정). 그리고 버튼이 텍스트와 겹치기 시작합니다. 이것이 플러그인에서 미리 정의 된 모듈이라는 사실 때문에 생성되는 방식에 대해서는 아무 것도 변경할 수 없기 때문에 현실적으로 변경할 수있는 유일한 것은 사용자 정의 CSS 규칙을 추가하는 것입니다.

사진 : 내가 사용 : 이전에, 명확한 수정이라는 것을 들어 본 적이 있지만 내가 그들을 봤 때부터 요소를 유지에서만이었다 것처럼 보였다

위 또는 왼쪽이 아닌 오른쪽에서 scooting. @media와 화면 너비를 사용하여 모든 요소에 대해 CSS 규칙을 추가해야하는 것을 원하지 않습니다. 대신 스마트하게 할 수있는 방법이 있습니다. 하나 있습니까?

읽어 주셔서 감사합니다. 여기

Answer 1

단지 몇 옵션 :

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

Source

그러나 당신이 할 수없는 경우 : 당신이 그것을 할 수있는 방법 중 하나를 생각하고 아무런 문제가 wp_trim_words()를 사용하지 않습니다이

정말로 멀리까지도 액세스 할 수 있습니다 (최소한 페이지의 상자를 채우는 코드는 읽을 수 있습니까?). 미디어 쿼리를 시도하면 안전하고 안전하게 할 수 있습니다.

HTH!

Answer 2

flexbox를 사용해야 할 수도 있습니다.이 기능을 사용하여 어떻게 수정해야하는지 생각해보십시오.

.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>