성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] Roll A Lisp In C - Reading ; https...
[정성태] Java - How to use the Foreign Funct...
[정성태] 제가 큰 실수를 했군요. ^^; Delegate를 통한 Bein...
[정성태] Working with Rust Libraries from C#...
[정성태] Detecting blocking calls using asyn...
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Bootstrap의 dl/dt/dd 조합에서 문자열이 잘리지 않도록 CSS 설정</h1> <p> bootstrap의 dl/dt/dd 조합을 사용하면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <dl class="dl-horizontal" > <dt> COR_ENABLE_PROFILING </dt> <dd> @Model.Variables["COR_ENABLE_PROFILING"] </dd> ...[생략]... </dl> </pre> <br /> 기본적으로 다음과 같이 dt의 문자열이 긴 경우 "..."로 생략이 됩니다.<br /> <br /> <img alt='bootstrap_no_trunc_1.png' src='/SysWebRes/bbs/bootstrap_no_trunc_1.png' /><br /> <br /> 이것을 그냥 문자열 그대로 나오게 하려면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > How to force Twitter Bootstrap .dl-horizontal DT content to wrap instead of truncate? ; <a target='tab' href='https://stackoverflow.com/questions/12764332/how-to-force-twitter-bootstrap-dl-horizontal-dt-content-to-wrap-instead-of-trun'>https://stackoverflow.com/questions/12764332/how-to-force-twitter-bootstrap-dl-horizontal-dt-content-to-wrap-instead-of-trun</a> </pre> <br /> 위의 글에 따라, CSS에 다음과 같이 overflow 설정을 해주고,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > #envkey dt { overflow: visible; width: 200px !important; margin-right: 32px; } </pre> <br /> id 값을 상위의 dl 태그에 설정해 주면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <dl class="dl-horizontal" <span style='color: blue; font-weight: bold'>id="envkey"</span>> <dt> COR_ENABLE_PROFILING </dt> <dd> @Model.Variables["COR_ENABLE_PROFILING"] </dd> ...[생략]... </dl> </pre> <br /> 다음과 같이 문자열이 잘리지 않고 잘 나옵니다. ^^<br /> <br /> <img alt='bootstrap_no_trunc_2.png' src='/SysWebRes/bbs/bootstrap_no_trunc_2.png' /><br /> <br /> (참고로 ASP.NET MVC 프로젝트의 경우 .\wwwroot\css 폴더에 있는 site.css 파일을 수정하면 됩니다.)<br /> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
4882
(왼쪽의 숫자를 입력해야 합니다.)