는 플로트 긴 텍스트를 숨기기 바로

나는 데이터의 목록을 두 번째는, 텍스트가 너무 긴 경우, 그것은 밀어 뜻이는 플로트 긴 텍스트를 숨기기 바로

.mycontent-bottom { 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
#float-right{ 
 
    float: right; 
 
}

<div class="mycontent-bottom"> 
 
    <a href="">Title</a> 
 
    <span id="float-right">50000</span> 
 
</div> 
 
<div class="mycontent-bottom"> 
 
    <a href="">lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</a> 
 
    <span id="float-right">50000</span> 
 
</div>

문제처럼 표시 할 필요가있다 하단 테두리 바깥 쪽 번호. 모든 아이디어가 긴 텍스트를 숨기는 방법은 숫자가 오른쪽에 머무르고 국경 밖으로 밀리지 않겠습니까?

출처

2017-01-23 Tom Kur

나는 문제가 개인적으로,이를 복제하는 데 문제가 있습니다. 텍스트 길이에 관계없이 [JSFiddle] (https://jsfiddle.net/barLmu03/)에서 잘 작동하는 것 같습니다. 약간의 명확성을 제공 할 수 있습니까? ** 편집 : ** 수정, 나처럼 혼란스러워하는 사람. 플로팅 번호가 텍스트의 마지막 줄에 있으면 실제로 눌려집니다. – Santi

내 질문에 위의 JsFiddle 링크가 있습니다. –

나에게 숫자가 국경 아래로 밀려 들지는 않지만 예제를 보았습니다. 나는 그 공간을 채우기 위해 필요한 정확한 양의 단어를 가지고 그것을 재현 할 수있었습니다. 문제는 ** float 뒤에'clear : both;'**를 포함하지 않았다는 것입니다. – Santi

이 작업을 시도 할 수 :

https://jsfiddle.net/Lboxddh9/5/

.mycontent-bottom { 
    border-bottom: 1px solid #ccc; 
    display: inline-block; 
    width: 100%; 
} 
#float-right{ 
    float: right; 
}

또한, 당신이 한 페이지에 여러 요소에 대해 동일한 id의를 사용할 수 없습니다.

원본 마크 업이 유효하지 않은 이유는 이것이 올바른 이유입니다. 대신 여러 id의의 class와

<div class="mycontent-bottom"> 
    <a href="">Title</a> 
    <span class="float-right">...</span> 
</div> 
<div class="mycontent-bottom"> 
    <a href="">...</a> 
    <span class="float-right">...</span> 
</div>

업데이트 바이올린 :

https://jsfiddle.net/Lboxddh9/7/

출처

2017-01-23 21:30:10

는 플로트 긴 텍스트를 숨기기 바로

답변

관련 문제