使用纯 css 根据另一个元素的宽度设置跨度的宽度

Posted 2023-03-06

【中文标题】使用纯 css 根据另一个元素的宽度设置跨度的宽度

【英文标题】：Set width of a span based on width of another element with pure css

【发布时间】：2016-11-04 04:01:25

【问题描述】：

HTML

<div class="container">
  <div id="setter">
    <span>some variable content</span>  
  </div>

  <div class="wrap">
    <span>
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum    
    </span>
  </div>
</div>

CSS

.container 
  max-width: 200px;


.wrap 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  

案例：

我需要根据#setter div 中的跨度宽度动态设置.wrap 类中的跨度宽度。正如您在 css 中看到的，我在第二个 div 上使用了 ellipsis 溢出。 setter div 内容长度会有所不同。所以目标是让lorem ipsum的文字不比第一个div的内容宽。

Codepen：http://codepen.io/jacek213/pen/pbPkmQ

我想用纯css来实现，可以吗？如果没有，欢迎使用 js 中的 angular-friendly 解决方案（使用 jquery 可以），但是我需要它高效，因为我将一次显示大量使用这种结构构建的记录。

【问题讨论】：

纯css不行

使用纯 CSS 是不可能的。您将不得不依靠 JS 来获取一个元素的 outerWidth（以考虑填充等），然后将其应用于您希望更改的元素。

【参考方案1】：

我真的不认为你可以用 CSS 来实现这一点。试试这样的 jquery 解决方案：

var $setter = $("#setter");
$setter.siblings(".wrap").css("max-width", $setter.width()+"px");

【讨论】：

加一个因为太简洁了。现在要测试一下。

【参考方案2】：

这有点噱头，但可以用纯 CSS 完成

#setter 
  display: inline-block;


.container 
  max-width: 200px;
  position: relative;
  display: inline-block;
  padding-bottom: 1.125em;


.wrap 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 0;
  right: 0;

<div class="container">
  <div id="setter">
    <span>some variable content</span>
  </div>

  <div class="wrap">
    <span>
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum    
    </span>
  </div>
</div>

【讨论】：

很好的解决方案！您可以将此逻辑应用于figure 中的img 和figcaption 元素，以使它们保持相同的宽度，而与图像在不同视口上的缩放方式无关。