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

비밀번호

댓글 쓴 사람
 




... 16  17  18  19  20  21  22  23  24  [25]  26  27  28  29  30  ...
NoWriterDateCnt.TitleFile(s)
11552정성태6/25/20182503.NET Framework: 769. C# 7.3에서 개선된 문법 4개(Support == and != for tuples, Ref Reassignment, Constraints, Stackalloc initializers)파일 다운로드1
11551정성태6/14/20181695개발 환경 구성: 383. BenchmarkDotNet 사용 시 주의 사항
11550정성태6/13/20182096.NET Framework: 768. BenchmarkDotNet으로 Span<T> 성능 측정
11549정성태6/13/20181817개발 환경 구성: 382. BenchmarkDotNet에서 생성한 BuildPlots.R 파일을 실행하는 방법
11548정성태6/13/20182093오류 유형: 470. .NET Core + BenchmarkDotNet 실행 시 프레임워크를 찾지 못하는 문제
11547정성태6/13/20182342.NET Framework: 767. BenchmarkDotNet 라이브러리 소개파일 다운로드1
11546정성태6/14/20183157.NET Framework: 766. C# 7.2의 특징 - GC 및 메모리 복사 방지를 위한 struct 타입 개선 [4]파일 다운로드1
11545정성태6/11/20182647오류 유형: 469. .NET Core 프로젝트를 Visual Studio에서 실행 시 System.BadImageFormatException 발생하는 경우 [1]
11544정성태6/10/20182310.NET Framework: 765. C# 7.2 - 숫자 리터럴의 선행 밑줄과 뒤에 오지 않는 명명된 인수
11543정성태6/10/20182072.NET Framework: 764. C# 7.2 - private protected 접근자 추가파일 다운로드1
11542정성태6/9/20182565개발 환경 구성: 381. Azure Web App 확장 예제 - Remove Custom Headers
11541정성태9/14/20182173개발 환경 구성: 380. Azure Web App 확장 배포 방법 [1]
11540정성태6/9/20182382개발 환경 구성: 379. Azure Web App 확장 예제 제작 [2]
11539정성태6/8/20181987.NET Framework: 763. .NET Core 2.1 - Tiered Compilation 도입파일 다운로드1
11538정성태6/8/20181795.NET Framework: 762. .NET Core 2.1 - 확장 도구(Tools) 관리
11537정성태6/8/20183062.NET Framework: 761. C# - SmtpClient로 SMTP + SSL/TLS 서버를 이용하는 방법 [4]
11536정성태6/8/20183131.NET Framework: 760. Microsoft Build 2018 - The future of C# 동영상 내용 정리 [1]파일 다운로드1
11535정성태6/7/20182934.NET Framework: 759. C# - System.Span<T> 성능 [1]
11534정성태10/7/20194200.NET Framework: 758. C# 7.2 - Span<T> [3]
11533정성태6/8/20185479.NET Framework: 757. 포인터 형 매개 변수를 갖는 C++ DLL의 함수를 C#에서 호출하는 방법파일 다운로드1
11532정성태6/5/20182937.NET Framework: 756. JSON의 escape sequence 문자 처리 방식
11531정성태6/5/20185308오류 유형: 468. JSON.parse가 허용하지 않는 문자 [9]
11530정성태6/10/20183506.NET Framework: 755. C# 7.2 - 스택에만 생성할 수 있는 값 타입 지원 - "ref struct" [2]파일 다운로드1
11529정성태5/23/20182772.NET Framework: 754. 닷넷의 관리 포인터(Managed Pointer)와 System.TypedReference [5]파일 다운로드1
11528정성태6/10/20182757.NET Framework: 753. C# 7.2 - 3항 연산자에 ref 지원(conditional ref operator) [1]
11527정성태5/17/20182553오류 유형: 467. RDP 로그인 에러 - This could be due to CredSSP encryption oracle remediation.
... 16  17  18  19  20  21  22  23  24  [25]  26  27  28  29  30  ...