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)
11826정성태2/26/2019932오류 유형: 520. 우분투에 .NET Core SDK 설치 시 패키지 의존성 오류
11825정성태2/25/20192450개발 환경 구성: 428. Visual Studio 2019 - CMake를 이용한 리눅스 빌드 환경 설정 [1]
11824정성태2/25/20191303오류 유형: 519. The SNMP Service encountered an error while accessing the registry key SYSTEM\CurrentControlSet\Services\SNMP\Parameters\TrapConfiguration. [1]
11823정성태2/21/2019903오류 유형: 518. IIS 관리 콘솔이 뜨지 않는 문제
11822정성태2/20/2019924오류 유형: 517. docker에 설치한 MongoDB 서버로 연결이 안 되는 경우
11821정성태2/20/2019999오류 유형: 516. Visual Studio 2019 - This extension uses deprecated APIs and is at risk of not functioning in a future VS update. [1]
11820정성태2/20/20192775오류 유형: 515. 윈도우 10 1809 업데이트 후 "User Profiles Service" 1534 경고 발생
11819정성태2/20/20191140Windows: 158. 컴퓨터와 사용자의 SID(security identifier) 확인 방법
11818정성태2/20/20191361VS.NET IDE: 131. Visual Studio 2019 Preview의 닷넷 프로젝트 빌드가 20초 이상 걸리는 경우 [2]
11817정성태2/17/20191170오류 유형: 514. WinDbg Preview 실행 오류 - Error : DbgX.dll : WindowsDebugger.WindowsDebuggerException: Could not load dbgeng.dll
11816정성태2/17/20191037Windows: 157. 윈도우 스토어 앱(Microsoft Store App)을 명령행에서 직접 실행하는 방법
11815정성태2/14/20191371오류 유형: 513. Visual Studio 2019 - VSIX 설치 시 "The extension cannot be installed to this product due to prerequisites that cannot be resolved." 오류 발생
11814정성태2/12/2019870오류 유형: 512. VM(가상 머신)의 NT 서비스들이 자동 시작되지 않는 문제
11813정성태2/12/20191073.NET Framework: 809. C# - ("Save File Dialog" 등의) 대화 창에 확장 속성을 보이는 방법
11812정성태1/2/2020809오류 유형: 511. Windows Server 2003 VM 부팅 후 로그인 시점에 0xC0000005 BSOD 발생
11811정성태2/11/20191126오류 유형: 510. 서버 운영체제에 NVIDIA GeForce Experience 실행 시 wlanapi.dll 누락 문제
11810정성태2/11/2019871.NET Framework: 808. .NET Profiler - GAC 모듈에서 GAC 비-등록 모듈을 참조하는 경우의 문제
11809정성태2/11/20191084.NET Framework: 807. ClrMD를 이용해 메모리 덤프 파일로부터 특정 인스턴스를 참조하고 있는 소유자 확인
11808정성태2/8/20191586디버깅 기술: 123. windbg - 닷넷 응용 프로그램의 메모리 누수 분석
11807정성태1/29/20191168Windows: 156. 가상 디스크의 용량을 복구 파티션으로 인해 늘리지 못하는 경우 [3]
11806정성태1/29/20191121디버깅 기술: 122. windbg - 덤프 파일로부터 PID와 환경 변수 등의 정보를 구하는 방법
11805정성태1/28/20191784.NET Framework: 806. C# - int []와 object []의 차이로 이해하는 제네릭의 필요성 [2]파일 다운로드1
11804정성태1/24/20191116Windows: 155. diskpart - remove letter 이후 재부팅 시 다시 드라이브 문자가 할당되는 경우
11803정성태1/10/20191380디버깅 기술: 121. windbg - 닷넷 Finalizer 스레드가 멈춰있는 현상
11802정성태1/7/20191489.NET Framework: 805. 두 개의 윈도우를 각각 실행하는 방법(Windows Forms, WPF)파일 다운로드1
11801정성태1/1/20191683개발 환경 구성: 427. Netsh의 네트워크 모니터링 기능 [3]
1  2  3  4  5  6  7  8  9  10  11  12  [13]  14  15  ...