방지 플로트는

Question

내가 세 필드가

내가 한 줄에 싶습니다 필요할 때 , 오른쪽에 .price, 그리고 항상 각 필드 사이에 최소한 공백이 있어야합니다.

여기 까다로운 부분이 있습니다. 화면이 너무 좁은 경우 div를 감싸거나 넘치지 않게하고 싶습니다. 대신 .name을 텍스트 생략 부호로 생략하고 싶습니다.

div{background:#abcdef;white-space:nowrap} 
.name{text-overflow:ellipsis} 
.size{} 
.price{float:right} 

는 현재 화면이 좁은 경우 다음 .price는 (내가 원하지 않는) 두 번째 라인에 떨어지고 화면이 (.name을하고 크기는 오버 플로우 사업부 후도 좁은 있다면 어떤 또한 원하지 않음) .name은 줄임표로 절사되지 않습니다.

내가 뭘 잘못하고 있니?

Answer 1

사용 인 flexbox :

div { 
 
    background: #abcdef; 
 
    display: flex; 
 
} 
 
.name { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.size { 
 
    margin: 0 .5em; 
 
} 
 
.price { 
 
    margin-left: auto; 
 
}

<div> 
 
    <span class="name">Blue Widgets Over Miami</span> 
 
    <span class="size">large</span> 
 
    <span class="price">$9.99</span> 
 
</div> 
 
<br /> 
 
<div> 
 
    <span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span> 
 
    <span class="size">large</span> 
 
    <span class="price">$9.99</span> 
 
</div>

Answer 2

나는 이것이 당신이 https://jsfiddle.net/kvb5hb6f/14/

가고있는 나는 수레를 제거하고 오른쪽으로 절대 위치로 변경 무엇을 생각하고 부모 DIV에 padding-right을 추가 있도록 왼쪽에있는 텍스트하지 않습니다 이상 오른쪽에 가격을 두른 다음 text-overflow: ellipsis;을 부모 div에 추가합니다.

div { 
    background: #abcdef; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding-right: 50px; 
} 

.price { 
    position: absolute; 
    right: 0; 
}