ASP.NET GRIDVIEW- 열의 단어 포장을 방지합니다

StackOverflow https://stackoverflow.com/questions/782428

  •  13-09-2019
  •  | 
  •  

문제

asp.net gridview에는 데이터베이스에서 문자열을 인쇄하는 필드가 있습니다. 이 데이터의 범위는 10 ~ 100 자입니다. 정상보다 길면 필드는 데이터를 낭비하여 행이 다른 것보다 더 많은 수직 공간을 차지하게합니다. 나는 행에 맞지 않는 데이터를 자르고 싶다. 그리고 그 옆에 "..."가 더 있음을 나타 내기 위해 "..."을 가지고 싶다. 나는 그들이 크기를 조정할 필요가 없으며, 높이가 다른 행을 원하지 않습니다. SEO 목적을 위해 이것이 클라이언트 측에서 동적으로 수행 될 수 있기를 바랍니다.

참조 ActiveWidgets 그리드는 여기에 있습니다, 회사 이름을 크기를 조정하여 맞지 않도록하십시오. 내용물을 감싸지 않지만 대신 내가하고 싶은 일을 정확하게 수행합니다.

이 기술을 asp.net gridview에 어떻게 적용 할 수 있습니까? 나는 일부 JavaScript가 관련되어 있다고 가정합니다. 그것이 사실이라면, 나는 선호합니다 아니다 jQuery와 같은 라이브러리를 사용하십시오 (이유를 묻지 마십시오.이 프로젝트에 외부 종속성을 사용할 수 없습니다).

도움이 되었습니까?

해결책

목차

  1. 문제의 그림
  2. 하나의 솔루션의 그림

문제의 그림
다음 HTML을 브라우저에 복사하십시오 (적어도 Firefox 및 Internet Explorer 7, 오페라도 시도해야합니다) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div, td
        {
            width: 100px;
            border: solid 1px black;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        content content content content content content
    </div>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    content content content content content content
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

그것을 주목하십시오 td 요소는 넘치는 콘텐츠를 숨기지 않습니다. 오직 div 요소는 이제이 작업을 수행하는 방법입니다. 인터넷 익스플로러 td 요소는 컨텐츠 포장을 중지하는 방법조차 모릅니다.

엄밀히 말하면, 기준,, td 요소는 지원하지 않습니다 white-space 규칙. 그만큼 div 그리고 th 요소.

하나의 솔루션의 그림
이것은 하나 문제에 대한 해결책 (Opera, Firefox 및 Internet Explorer에서 테스트) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        td
        {
            border: solid 1px black;
        }
        div
        {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <div>
                        content content content content content content
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

다른 팁

사용자가 Internet Explorer를 사용하고 있다는 것을 알고 있다면 다음 IE 만 CSS를 사용할 수 있습니다.

td.nooverflow
{
  text-overflow:ellipsis;
}

그런 다음 AS의 너비를 고정하려는 열의 ItemStyle을 설정하십시오. <ItemStyle CssClass='nooverfolow'/> (신청서에 올바르게 얻으려면 CSS와 함께 플레이해야합니다)

불행히도 이것은 IE 일 뿐이므로 다른 브라우저의 경우 동일한 것을 시뮬레이션 할 수있는 해킹이 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top