Html 如何从多个TO中获取一个范围标记以溢出其父标记

发布于11月02日

我有一个高光跨度，我想坐在to之后，而不会影响父对象的宽度.我不想使用绝对定位.是否可以将该跨度与TO示例对齐并使父级溢出示例:

Thank you for
your interest 
to Sign up to today's deals

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline-block;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to </span>
  <span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
 </div>
</div>

推荐答案

如果<span>之后没有其他内容，给它width: 0也可以(但这与给它position: absolute非常相似):

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline-block;
  width: 0;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to </span>
  <span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
 </div>
</div>

然而，如果您可以稍微更改一下您的HTML语言，这里有"proper"种使用HTMLEntity &NoBreak;实现这一点的方法.您还必须将跨度的display更改为inline:

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to</span>&NoBreak;<span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
  <span>right NOW.</span>
 </div>
</div>