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)
12240정성태6/23/2020106오류 유형: 622. 소켓 바인딩 시 "System.Net.Sockets.SocketException: An attempt was made to access a socket in a way forbidden by its access permissions" 오류 발생
12239정성태6/21/202079Linux: 30. (윈도우라면 DLL에 속하는) .so 파일이 텍스트로 구성된 사례
12238정성태6/21/2020108.NET Framework: 913. C# - SharpDX + DXGI를 이용한 윈도우 화면 캡처 라이브러리
12237정성태7/8/2020126.NET Framework: 912. 리눅스 환경의 .NET Core에서 "test".IndexOf("\0")가 0을 반환
12236정성태6/19/202077오류 유형: 621. .NET Standard 대상으로 빌드 시 dynamic 예약어에서 컴파일 오류 - error CS0656: Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create'
12235정성태6/19/202050오류 유형: 620. Windows 10 - Inaccessible boot device 블루 스크린
12234정성태6/19/202053개발 환경 구성: 494. NuGet - nuspec의 패키지 스키마 버전(네임스페이스) 업데이트 방법
12233정성태6/19/202043오류 유형: 619. SQL 서버 - The transaction log for database '...' is full due to 'LOG_BACKUP'. - 두 번째 이야기
12232정성태6/19/202040오류 유형: 618. SharePoint - StoreBusyRetryLater 오류
12231정성태6/15/2020127.NET Framework: 911. Console/Service Application을 위한 SynchronizationContext - AsyncContext
12230정성태6/15/202053오류 유형: 617. IMetaDataImport::GetMethodProps가 반환하는 IL 코드 주소(RVA) 문제
12229정성태6/13/2020253.NET Framework: 910. USB/IP PROJECT를 이용해 C#으로 USB Keyboard + Mouse 가상 장치 만들기 [1]
12228정성태6/12/2020144.NET Framework: 909. C# - Source Generator를 적용한 XmlCodeGenerator파일 다운로드1
12227정성태6/12/20202130오류 유형: 616. Visual Studio의 느린 업데이트 속도에 대한 원인 분석 [5]
12226정성태6/19/2020135개발 환경 구성: 493. OpenVPN의 네트워크 구성파일 다운로드1
12225정성태6/11/2020110개발 환경 구성: 492. 윈도우에 OpenVPN 설치 - 클라이언트 측 구성
12224정성태6/11/2020218개발 환경 구성: 491. 윈도우에 OpenVPN 설치 - 서버 측 구성
12223정성태6/9/2020252.NET Framework: 908. C# - Source Generator 소개 [2]파일 다운로드1
12222정성태6/3/202098VS.NET IDE: 146. error information: "CryptQueryObject" (-2147024893/0x80070003)
12221정성태6/3/2020106Windows: 168. 비어 있지 않은 디렉터리로 symbolic link(junction) 연결하는 방법
12220정성태6/3/2020110.NET Framework: 907. C# DLL로부터 TLB 및 C/C++ 헤더 파일(TLH)을 생성하는 방법
12219정성태6/1/2020273.NET Framework: 906. C# - lock (this), lock (typeof(...))를 사용하면 안 되는 이유파일 다운로드1
12218정성태5/31/2020218.NET Framework: 905. C# - DirectX 게임 클라이언트 실행 중 키보드 입력을 감지하는 방법 [1]
12217정성태5/24/2020108오류 유형: 615. Transaction count after EXECUTE indicates a mismatching number of BEGIN and COMMIT statements. Previous count = 0, current count = 1.
12216정성태5/15/2020233.NET Framework: 904. USB/IP PROJECT를 이용해 C#으로 USB Keyboard 가상 장치 만들기
12215정성태5/12/2020348개발 환경 구성: 490. C# - (Wireshark의) USBPcap을 이용한 USB 패킷 모니터링파일 다운로드1
1  [2]  3  4  5  6  7  8  9  10  11  12  13  14  15  ...