是否有 CSS 方法可以使动态数据驱动的字符适合 div 按钮？

Posted 2023-03-06

【中文标题】是否有 CSS 方法可以使动态数据驱动的字符适合 div 按钮？

【英文标题】：Is there a CSS approach to make dynamic data driven characters fit inside div button?

【发布时间】：2016-09-20 16:26:11

【问题描述】：

我正在编辑一个数据驱动的网站，该网站使用来自自动化数据库引擎的数据。在 html 中，我有一个固定大小的按钮，其中包含来自数据库的文本。我想添加一些可以调整字体大小的 css 样式，以便它始终适合 div 按钮。

这是我的代码：

CSS：

.button  
    width: 216px; 
    height: 44px; 
    background-color: 00baf2; 
    color: #fff;
    border-radius: 5px;
    font-size: 23px;
    line-height: 45px;
    font-weight: 500;
    text-align: center;

@media screen and (max-width : 768px) 
    .button  
        width: 400px;
        height: 81px;
        font-size: 30px;
        line-height: 40px;
        background-size: 400px 81px !important;
        float: none !important;
        clear: both;
        margin: 25px auto; 
    

HTML

<div class="button">View Your Plan</div> (static/not data-driven)
<div class="button">Current Members Click Here</div> (data-driven)
<div class="button">Enroll Now</div> (static/not data-driven)

第二个/中间的按钮是一个数据驱动的按钮。有时，这些词会比“Current Members Click Here”更长。有时，它会是“在此处查看您的计划折扣计划”。问题是如果去掉字体大小和行高，它将默认字体大小，这使它变小。如何解决此问题，以便动态文本始终适合 div 按钮，无论它是短还是长？可以只用 CSS 完成还是有 JS 解决方案？

这是现在的样子： 桌面视图 移动视图

目标： 桌面 移动的

【问题讨论】：

为什么不填充按钮？

只需为数据驱动按钮类创建附加类

【参考方案1】：

编辑：

我刚刚阅读了一条评论，您希望该数据驱动按钮的字体比其他按钮小。只需在我用于该按钮的类中指定它，在您的字体大小中设置一个较小的 vw。

这可以使用 VW 单位实现，但您需要支持具有后备功能的旧版浏览器。我不知道这是否会在更大的桌面上出现问题，但希望您能了解这种方法。

  .button 
    width: 216px;
    min-height: 44px;
    background-color: #00baf2;
    color: #fff;
    border-radius: 5px;
    font-size: 23px;
    font-size: 2vw;
    font-weight: 500;
    text-align: center;
    line-height: 44px;
  
  .button.data-driven 
    line-height: 22px;
  
  @media (max-width: 992px) and (min-width: 768px) 
    .button 
      font-size: 23px;
      font-size: 2vw;
    
    .button.data-driven 
      line-height: initial;
    
  
  @media screen and (max-width: 768px) 
    .button 
      width: 400px;
      height: 81px;
      font-size: 30px;
      line-height: 81px;
      background-size: 400px 81px !important;
      float: none !important;
      clear: both;
      margin: 25px auto;
      padding-top: 0;
    
    .button.data-driven 
      line-height: 81px;
    
  

<div class="button">View Your Plan</div>(static/not data-driven)
<div class="button data-driven">Current Members Click Here</div>(data-driven)
<div class="button">Enroll Now</div>(static/not data-driven)

【参考方案2】：

您所追求的是可缩放以适应的动态字体大小，而仅使用 CSS 是无法做到的。您可以有条件地应用不同的类，这可能会影响字体大小。例如：

.button.small-text 
    font-size:12px;

.button.medium-text 
    font-size:18px;

.button.large-text 
    font-size:23px;

您需要在媒体查询中重新定义这些以适应不同的按钮宽度。

然后您必须使用后端或前端脚本来应用small-text、medium-text 或large-text。

使用 jQuery，这可能看起来像：

$('.button').removeClass('small-text medium-text large-text');
$('.button').each(function() 
    var len = $(this).text().length;
    if (len < 20) 
        $(this).addClass('large-text');
     else if (len < 40) 
        $(this).addClass('medium-text');
     else 
        $(this).addClass('small-text');
    
);

【讨论】：

我认为这是迄今为止最好的解决方案

我已经尝试过这种方法，jQuery 正在将类添加到 div 而不是属性，所以你会看到 [TEXT HERE] 但在开发工具我没有看到任何新的属性或值。

没关系。出于某种原因，直接在 .button 下添加 css 属性可以解决问题，而不是将其放在样式表的末尾。想知道为什么会这样？

【参考方案3】：

您所要做的就是删除按钮的height 以使其动态化。所以按钮会随着文本的增加而增长。并在按钮类中添加一个display:inline-block。

如果您需要使按钮具有固定/恒定高度，请在按钮的字体大小中使用% 值。 就像font-size:10%; 一样% 表示一个相对值，你可以使用它。

【讨论】：

按钮的高度在 OP 的例子中是恒定的