Question

我在剪切文本右下角的背景色时遇到问题。有谁可以帮助我吗？我设法用Javascript制作，但由于每个字词都存在跨度问题，我的老板不接受我的解决方案，因此我希望有人可以在不使用JavaScript的CSS中提供帮助，或者是否有javascript需要定位ID而不跨度，因为在sitecore中决定是否要选择h1，h2，h3等。这是链接：

#bigHeadline,
#smallHeadline{
  display: inline;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    float: left;
}

#bigHeadline{
  -webkit-padding-end: 5%;
    -moz-padding-end: 5%;
    padding-inline-end: 5%;
    font-size: 46px;
    line-height: 58px;
    padding: 0 15px;
    float: left;
    font-weight: 200;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    width: 630px;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto; 
    font-weight: 200;
  
}
#smallHeadline{
      padding: 0 15px;
    margin: 0;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto;
    font-size: 22px;
    line-height: 33px;
    color: #fff;
    text-transform: uppercase;
    font-family: Roboto;
    font-weight: 200;
  
}

 <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>

    <div class="c-imagebox-headlines">
      <div class="c-imagebox-headlines-tm-35">
        <h3 id="smallHeadline">Headline 1</h3>
        <br> 
        
        <h1 id="bigHeadline">Once upon a time in the west and east </h1>
        <br> 
        <h2 id="smallHeadline">SAVE <span class="service-texts">Kroner</span>&nbsp;<span>100,-</span> if you book online.</h2>
        </div>
    </div>
      
      
      </body>
    </html>

我尝试了其他类型的解决方案来禁用javascript，并使用了clip-path，border-radius，但在定位右下角区域时确实遇到了困难，请帮帮我。红色是我要裁剪的区域。

Answer 1

这不是一个简单的问题，因为您应该开发一个解析器，以正确的方式用<br/>切掉字符串（不切出单词，或者将<br/>放在逗号/点/任何符号）。您应该获取父容器.c-imagebox-headlines-tm-35的宽度，然后根据h1的字体大小计算最大单词量，并得出单词和字体大小的最佳近似值。对于一个愚蠢的问题，这是一个很难的解决方案。

也许您可以尝试使用此线程Auto-sizing text to fit container

如何剪切文本右下角的背景色

1 个答案: