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의 문자열이 긴 경우 "..."로 생략이 됩니다.
이것을 그냥 문자열 그대로 나오게 하려면,
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>
다음과 같이 문자열이 잘리지 않고 잘 나옵니다. ^^
(참고로 ASP.NET MVC 프로젝트의 경우 .\wwwroot\css 폴더에 있는 site.css 파일을 수정하면 됩니다.)
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]