접기 텍스트를 한 줄로 바꾸기

긴 텍스트를 한 줄로 접고 오른쪽에 MORE 링크를 표시하고 싶습니다. 펼쳐진 텍스트의 하단과 오른쪽에 LESS 링크가 표시되어야합니다.접기 텍스트를 한 줄로 바꾸기

이

text text text MORE 

text text text text 
text   LESS

축소 된 상태 position: relative; float: right와 잘 작동하는 것 같다,하지만 난 확장 된 상태를 달성하는 방법을 모른다 : 몇 가지 예는 분명히 만들 수 있습니다. float: right-bottom과 같은 것은 없습니다 (실제로는 float: bottom을 시뮬레이션해도 complicated hack이 필요하지만,이 해킹은 제 경우에는 사용할 수없는 것 같습니다). 알고리즘은 간단합니다 : 텍스트 뒤에 충분한 공간이 있다면 마지막 행의 끝에 넣으십시오. 그렇지 않으면 다음 행에 넣으십시오 (오른쪽 정렬), 그러나 브라우저에 알려주는 방법은 무엇입니까?

더 많은 예제가 어떻게 작동해야합니까? text MORE 라인 아래의 라인의 축약로 생성되어야한다는

text   MORE 

text a_long_word 
text text text LESS 

text a_long_word 
an_even_longer_word 
       LESS

참고.

나는 종류가

<div><a>MORE</a><span>the text....</span><a>LESS</a></div>

이 링크 중 하나를 은폐하고 축소 된 경우 overflow: hidden; height: 20px;을 설정처럼 뭔가 작업을 얻었다. 이제 text-overflow: ellipsis을 받고 싶습니다 ...

순수한 CSS 솔루션을 찾고 있지 않습니다. 나는 확장 된 텍스트의 높이를 안다. 그리고 내가 수평으로 끝나는 곳을 알고 있다면, 나는 MORE을 절대적으로 위치시키고 그것을 하루라고 부른다.

출처

2014-06-19 maaartinus

뭔가 놓치지 않는 한, CSS로 정말 간단 해 보입니다. 이건 어때? http://codepen.io/pageaffairs/pen/AwfoI

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

div {width: 20%; margin: 30px; background: #f7f7f7; overflow: hidden;} 
b {float: right;} 

</style> 
</head> 
<body> 

<div> 
    <span>text</span> <b>MORE</b> 
</div> 

<div> 
    <span>text a_long_word text text text</span> <b>LESS</b> 
</div> 

<div> 
    <span>text a_long_word an_even_longer_word</span> <b>LESS</b> 
</div> 

</body> 
</html>

출처

2014-06-19 02:55:24

는 내가 뭔가 잘못하고 있던 볼 ....하지만 당신이 무엇을 놓치고 있는지 : 첫 번째'div'의 텍스트는 한 두 번째 또는 세 번째로해야하지만, 한 줄에 구속 스타일로. – maaartinus

접기 텍스트를 한 줄로 바꾸기

답변

관련 문제