순수 css를 사용하는 다른 요소의 너비를 기준으로 스팬의 너비를 설정합니다.

순수 css를 사용하는 다른 요소의 너비를 기준으로 스팬의 너비를 설정합니다.

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;  
}

케이스:

안쪽에 스팬의 폭을 설정해야 합니다..wrap안쪽 스팬의 폭에 근거한 클래스#setter동적으로 분할합니다.사용하고 있는 css에서 알 수 있듯이ellipsis두 번째 디바에 넘칩니다.그setterdiv 콘텐츠 길이가 달라집니다.그래서 목표는 이 모든 것들을lorem ipsum텍스트가 첫 번째 div의 내용보다 넓지 않아야 합니다.

코드명: http://codepen.io/jacek213/pen/pbPkmQ

순수한 css로 달성하고 싶은데 가능한가요?그렇지 않다면 js의 각도 친화적인 솔루션(jquery usage OK)은 좋지만, 이 구조로 작성된 레코드를 한꺼번에 많이 표시하기 때문에 효율적인 솔루션이 필요합니다.

조금 교묘하지만 순수한 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>

CSS로는 이 일을 해낼 수 없을 것 같아요.다음과 같은 jquery 솔루션을 사용해 보십시오.

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

언급URL : https://stackoverflow.com/questions/38150525/set-width-of-a-span-based-on-width-of-another-element-with-pure-css