Microsoft MVP성태의 닷넷 이야기
글쓴 사람
홈페이지
첨부 파일
 

Bootstrap의 dl/dt/dd 조합에서 문자열이 잘리지 않도록 CSS 설정

bootstrap의 dl/dt/dd 조합을 사용하면,

<dl class="dl-horizontal" >
    <dt>
        COR_ENABLE_PROFILING
    </dt>
    <dd>
        @Model.Variables["COR_ENABLE_PROFILING"]
    </dd>
    ...[생략]...
</dl>

기본적으로 다음과 같이 dt의 문자열이 긴 경우 "..."로 생략이 됩니다.

bootstrap_no_trunc_1.png

이것을 그냥 문자열 그대로 나오게 하려면,

How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate?
; https://stackoverflow.com/questions/12764332/how-to-force-twitter-bootstrap-dl-horizontal-dt-content-to-wrap-instead-of-trun

위의 글에 따라, CSS에 다음과 같이 overflow 설정을 해주고,

#envkey dt {
    overflow: visible;
    width: 200px !important;
    margin-right: 32px;
}

id 값을 상위의 dl 태그에 설정해 주면,

<dl class="dl-horizontal" id="envkey">
    <dt>
        COR_ENABLE_PROFILING
    </dt>
    <dd>
        @Model.Variables["COR_ENABLE_PROFILING"]
    </dd>
    ...[생략]...
</dl>

다음과 같이 문자열이 잘리지 않고 잘 나옵니다. ^^

bootstrap_no_trunc_2.png

(참고로 ASP.NET MVC 프로젝트의 경우 .\wwwroot\css 폴더에 있는 site.css 파일을 수정하면 됩니다.)




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]





[최초 등록일: ]
[최종 수정일: 10/16/2018 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer@outlook.com

비밀번호

댓글 쓴 사람
 




1  2  3  4  [5]  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
12021정성태11/12/20191575도서: 시작하세요! C# 8.0 프로그래밍 [3]
12020정성태9/11/2019400VC++: 134. SYSTEMTIME 값 기준으로 특정 시간이 지났는지를 판단하는 함수
12019정성태9/11/2019353Linux: 23. .NET Core + 리눅스 환경에서 Environment.CurrentDirectory 접근 시 주의 사항
12018정성태9/25/2019319오류 유형: 567. IIS - Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive. (D:\lowSite4\web.config line 11)
12017정성태9/11/2019606오류 유형: 566. 비주얼 스튜디오 - Failed to register URL "http://localhost:6879/" for site "..." application "/". Error description: Access is denied. (0x80070005)
12016정성태9/5/2019761오류 유형: 565. git fetch - warning: 'C:\ProgramData/Git/config' has a dubious owner: '(unknown)'.
12015정성태9/3/2019901개발 환경 구성: 457. 윈도우 응용 프로그램의 Socket 연결 시 time-out 시간 제어
12014정성태9/3/2019717개발 환경 구성: 456. 명령행에서 AWS, Azure 등의 원격 저장소에 파일 관리하는 방법 - cyberduck/duck 소개
12013정성태8/28/2019683개발 환경 구성: 455. 윈도우에서 (테스트) 인증서 파일 만드는 방법
12012정성태8/28/2019707.NET Framework: 859. C# - HttpListener를 이용한 HTTPS 통신 방법
12011정성태8/27/2019631사물인터넷: 57. C# - Rapsberry Pi Zero W와 PC 간 Bluetooth 통신 예제 코드파일 다운로드1
12010정성태8/27/2019531VS.NET IDE: 138. VSIX - DTE.ItemOperations.NewFile 메서드에서 템플릿 이름을 다국어로 설정하는 방법
12009정성태8/26/2019475.NET Framework: 858. C#/Windows - Clipboard(Ctrl+C, Ctrl+V)가 동작하지 않는다면?파일 다운로드1
12008정성태8/26/2019446.NET Framework: 857. UWP 앱에서 SQL Server 데이터베이스 연결 방법
12007정성태8/24/2019536.NET Framework: 856. .NET Framework 버전을 올렸을 때 오류가 발생할 수 있는 상황
12006정성태8/23/2019778디버깅 기술: 129. guidgen - Encountered an improper argument. 오류 해결 방법 (및 windbg 분석)
12005정성태8/13/20191495.NET Framework: 855. 닷넷 (및 VM 계열 언어) 코드의 성능 측정 시 주의할 점 [2]파일 다운로드1
12004정성태8/12/2019985.NET Framework: 854. C# - 32feet.NET을 이용한 PC 간 Bluetooth 통신 예제 코드
12003정성태8/12/2019541오류 유형: 564. Visual C++ 컴파일 오류 - fatal error C1090: PDB API call failed, error code '3'
12002정성태8/12/2019693.NET Framework: 853. Excel Sheet를 WinForm에서 사용하는 방법 - 두 번째 이야기
12001정성태8/10/2019829.NET Framework: 852. WPF/WinForm에서 UWP의 기능을 이용해 Bluetooth 기기와 Pairing하는 방법
12000정성태8/9/2019694.NET Framework: 851. WinForm/WPF에서 Console 창을 띄워 출력하는 방법파일 다운로드1
11999정성태8/1/2019495오류 유형: 563. C# - .NET Core 2.0 이하의 Unix Domain Socket 사용 시 System.IndexOutOfRangeException 오류
11998정성태7/30/2019572오류 유형: 562. .NET Remoting에서 서비스 호출 시 SYN_SENT로 남는 현상파일 다운로드1
11997정성태7/30/2019902.NET Framework: 850. C# - Excel(을 비롯해 Office 제품군) COM 객체를 제어 후 Excel.exe 프로세스가 남아 있는 문제파일 다운로드1
11996정성태7/25/2019734.NET Framework: 849. C# - Socket의 TIME_WAIT 상태를 없애는 방법파일 다운로드1
1  2  3  4  [5]  6  7  8  9  10  11  12  13  14  15  ...