向左，向右填充文本字符串

Question

所以我一直在努力让这一切发挥作用，但现在我在质疑它是否可能......

我基本上想要允许字符串＆＃34; Sugar＆＃34;向左扩展并填满，然后向右移动;当输入较长的文本字符串时。允许我保持与设计相似的外观。

我现在猜测单凭css本身是不可能的？

我的代码目前看起来像这样：

＆＃13;

＆＃13;

#air_track {
  color: #fff;
  float: left;
  margin: 24px 0 0 30px;
}
#air_track-span-1 {
  font-family: GothamBlack;
  font-size: 23px;
  font-weight: 900;
  float: left;
}
#air_track-span-2 {
  font-family: GothamBook;
  font-size: 20px;
  line-height: 10px;
  text-align: right;
  float: right;
}

＆＃13;

<div id="air_track">
  <span id="air_track-span-1">Maroon 5</span>
  <br />
  <span id="air_track-span-2">Sugar</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我没有对此进行测试，但这应该会让您了解如何使用jquery来解决它。我不认为有一种纯粹的CSS方式来做到这一点。

1. .each =查找所有具有标题类名称的标记
2. el.width =找到该标题的宽度
3. el.next.width =找到下一个应该是副标题的文字......
4. if statment =将标题宽度与字幕宽度进行比较

比你可以使用.css更改样式表。

$('.title').each(
    function(index, el) {
         thisWidth = $(el).width();
         subTitleWidth = $(el).next().width();
         if(thisWidth>subTitleWidth) {
              // align right 
         } else {
              // align left
         }   

    }
);