Question

我已经尽我所能想尽一切办法使箭头在一行的末尾保持附加在最后一个单词上，而不是包裹在下一行，因为在响应性环境中，列会变窄。我已经尝试在尾随的'a'标签内外使用'arrow'跨度。

<h3 class="title-head"><a href="'link'">Link Text<span class="arrow">►</span></a></h3>

或

<h3 class="title-head"><a href="'link'">Link Text</a><span class="arrow">►</span></h3>

顺便说一句，删除'arrow'上的'display：inline-block'确实解决了换行问题，但它还会创建其他问题，因此我无法使用该解决方案。

来自@Temani Afif的解决方案：此CSS与a标记外的箭头跨度（上面的第二个示例）配合得很好：

    .title-box h3.title-head a {
        margin-right:1em; 
    }

    .title-box h3.title-head .arrow { 
    color:#f7941d; 
    font-size:80%; 
    -webkit-transform:scale(.5,1); 
    transform:scale(.5,1); 
    display:inline-block;
    position:relative; 
    bottom:0; 
    font-family:Arial, sans-serif; 
    margin-left:-1.2em;
    }

Answer 1

使用不可中断的空间 

h3 {
  animation:change 2s linear infinite alternate;
  border:1px solid;
}
@keyframes change {
  from {max-width:50%}
  to {max-width:10%}
}

<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

使用inline-block，您可以尝试像这样进行边距破解：

h3 {
  animation:change 2s linear infinite alternate;
  border:1px solid;
  margin-right:30px;
}
@keyframes change {
  from {max-width:50%}
  to {max-width:10%}
}

.arrow {
  display:inline-block;
  margin-right:-30px;
}

<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

更新

考虑您的CSS代码：

h3 {
  animation: change 2s linear infinite alternate;
  border: 1px solid;
  margin-right: 20px;
}

@keyframes change {
  from {
    max-width: 50%
  }
  to {
    max-width: 10%
  }
}

h3.title-head .arrow {
  color: #f7941d;
  font-size: 80%;
  -webkit-transform: scale(.5, 1);
  transform: scale(.5, 1);
  display: inline-block;
  position: relative;
  left: -.13em;
  bottom: 0;
  font-family: Arial, sans-serif;
  margin-right: -20px;
}

<h3 class="title-head"><a href="'link'">Link Text</a>&nbsp;<span class="arrow">►</span></h3>

Answer 2

如果我对您的理解正确，则可以尝试将箭头绝对定位：

h3 {
  position: relative;
  padding-right: 15px;
}
h3 > span {
  position: absolute;
  top: 4px;
  right: 0;
}

演示：https://jsfiddle.net/pxqrh1cu/

如果我误解了问题，请随时发表评论。

使行尾的箭头保持附加到行中的最后一个单词

2 个答案: