防止按钮与 CSS 中的文本重叠？

Question

我正在开发一个 Wordpress 网站，对于任何类型的网页设计来说还是相当新的。

我有一个预定义的模块，它由几列组成，每列都有一个框，其中包含一个标题、一个文本摘录（长度是设定的单词数量）和一个位于该文本摘录下方的按钮。由于字长可变，这个模块的标准版本的每个盒子都有不同的高度，这看起来很愚蠢。

我想让所有的盒子都达到相同的高度，并将按钮设置在靠近盒子底部的中心。在尝试通过将按钮设置为固定位置来实现这一点之后，这对于微调来说非常烦人，我意识到我不妨在文本摘录上设置一个固定高度并以这种方式控制按钮的位置。

遗憾的是，它仍然没有按照我想要的方式工作。它在标准视图中看起来很棒，但是一旦我将浏览器窗口变小，我给它的设置高度就会变得太小（我将高度设置为 8em），并且按钮开始与文本重叠。由于这是插件中的预定义模块，因此我无法更改它的生成方式，我唯一可以实际更改的就是添加自定义 CSS 规则。

图片：

我听说过使用 ::before 的所谓清晰修复，但是当我用谷歌搜索它们时，它们似乎只是为了防止元素从左侧或右侧滑入，而不是从上方滑入。我不想使用@media 和屏幕宽度为我使用的每个元素添加一大堆 CSS 规则，我宁愿有一些聪明的方法来做到这一点。有吗？

非常感谢阅读！

Answer 1

您可能需要使用 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>

Answer 2

这里只有几个选项：

我认为使用 wp_trim_words() 可以做到这一点并且没有问题的方法之一：

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

Source

但是，如果您甚至无法真正访问那么远（您至少可以阅读在页面中放置框的代码吗？），当然尝试媒体查询可能会帮助您做得很好且安全。

HTH！