Question

我为iOS NSAttributedString提出了类似的问题，但因为它不可能，我正在寻找一种方法来实现这一点，如果需要的话，通过HTML，CSS和javascript。

我知道CSS使用第一个字母有“drop cap”。示例：https://codepen.io/tutsplus/pen/GZxjEM

但是，我需要为整个单词而不仅仅是第一个字母。在下面的图片中，注意“力量”是最大的，然后“不是什么”和“你有，而不是”与“力量”共享同一行。

注意：我的问题不在于如何格式化第一个单词 - 这是如何让2行共享第一行。注意“力量”是最大的，然后“不是某种东西”，“你有，而不是”与“力量”共享同一条线。如何让他们共享同一条线？类似于drop-caps允许您与第一个字母共享多行。

我需要用HTML，CSS和JS来实现类似的外观。如果不能使用下降帽，我还能采用其他方法吗？

注意：由于我的文字可变，我无法使用图片/ photoshop等。

编辑：根据建议，CSS Flexbox可能能够实现这一目标。我需要弄清楚如何将我的单词放在框中：

    <div>
    <div style="float: left; font-size: 4em; background-color:grey;">
        STRENGTH
    </div>
    <div style="float: left; padding-left: 10px; background-color:yellow;">
        <div>
            <span style="font-size: 2em;">is not</span><span style="font-size: 1em;"> something</span>
        </div>
        <div>
            you have, rather
        </div>
    </div>
</div>
<div style="clear: both; font-size: 2em;">
    something that reveals itself
</div>
<div style="font-size: 4em;">
    when you need it.
</div>
<div style="font-size: 1em;">
    #myHASHTAG
</div>

Answer 1

这是一个可以使用Flexbox

的结构

＆＃13;

.inner {
  display: flex;
  align-items: flex-end;
}
.inner > div:nth-child(1) {
  font-size: 60px;
  text-transform: uppercase;
}
.inner2 {
  padding: 0 0 15px 10px;
}
.inner2 div:nth-child(-n+2) {
  display: inline-block;
}
.inner2 > div:nth-child(1) {
  font-size: 20px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(2) {
  font-size: 28px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(3) {
  font-size: 50px;
  text-transform: uppercase;
}

＆＃13;

<div class="wrapper">
  <div class="inner">
    <div>Strength</div>
    <div class="inner2">
      <div>is not</div>
      <div>something</div>
      <div>you have, rather</div>
    </div>
  </div>
  <div>something that reveals itself</div>
  <div>when you need it</div>
</div>

＆＃13;

Answer 2

试试这个：

<div>
    <div style="float: left; width: 20%;">
        Big Text
    </div>
    <div style="float: left; width: 70%;">
        <div>
            small text first line
        </div>
        <div>
            small tex second line
        </div>
    </div>
</div>
<div style="clear: both;">
    the rest of the text
</div>

Answer 3

我为你写了一个例子并试着把它变成你所分享的照片，希望它对你有用：

HTML：

jQuery.fn.extend();

css：

<span class="bigText">Strength </span>
<span class="mediumText">is not 
   <span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>

https://jsfiddle.net/emilvr/6o2fpf9t/1/

HTML CSS如何删除大写字母而不是首字母？

3 个答案: