2014-04-04 2 views
0

3 div의 이미지가 아래에 있습니다. 그들은 전체 열을 당겨서 표시합니다. 나는 단지 255자를 말하고 싶다. 그리고 전체 기사를 보려면 클릭 할 수있는 Read More 링크가 있습니다.div 안에있는 내용을 제한하십시오.

왼쪽의 상자에 자세히 표시되는 방법을 확인하십시오. 전체 3 개의 상자에 내용의 일부만 표시 한 다음 더 많은 링크를 읽으 려합니다. 첫 번째 상자가 작동하는 유일한 이유는 내용이 초소형이기 때문입니다.

사이트는 CSS5와 CSS3이있는 HTML5입니다.

정보가 Entity/LINQ에서 가져오고 있습니다. 콘텐츠를 제한해야한다고 가정합니다.

db.TPGForums.Where(m => m.boardID == 11) 
     .SelectMany(m => m.TPGForumTopics) 
     .SelectMany(m => m.TPGForumPosts) 
     .OrderByDescending(p => p.dateCreated) 
     .FirstOrDefault(); 

모두가 <div class="news-block">content</div>

에 싸여 어떻게 이것을 달성 할 수 있습니다 여기에

한 예입니다?

편집 : 콘텐츠를 당겨되는 문제가 발생할 수 있습니다

또 다른 문제는 HTML 디코딩. 따라서 일부만 잡아 당기면 페이지에 일부 HTML 오류가 발생하여 제대로 닫히지 않을 수 있습니다. 그래서 내 유일한 옵션은 div의 크기로 제한하고 오버 플로우를 숨기는 것입니다.

enter image description here

답변

1

당신은이 당겨되고있는 내용을 제한 할 필요가있다. 또한 숨겨진 오버 플로우와 최대 높이를 설정하고는 janky보고에서 아래쪽 가장자리를 유지하는 그라데이션의 일종을 사용할 수 있습니다. 또는 text-overflow: ellipsis을 사용할 수도 있습니다.

+0

당신은 '텍스트 오버플로 : 줄임표'를 말합니다 .. 맞습니까? –

+1

하하, 고마워. 너무 피곤했다. –

+1

나와 함께 모든 시간이 발생합니다 :) –

관련 문제