Twitter 부트스트랩 버튼 텍스트 워드랩

Twitter 부트스트랩 버튼 텍스트 워드랩

아무리 생각해도 이 트위터 부트스트랩 버튼을 여러 줄로 텍스트 랩할 수 없습니다. 이렇게 나타납니다.

이미지를 올릴 수 없습니다. 그래서 이렇게 하는 것입니다.

[이것이 버튼 텍스트입니다.

다음과 같은 모습으로.

[이것은]

[버튼 텍스트]

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

어떤 도움이라도 주시면 감사하겠습니다.

편집. 추가해 보았습니다.word-wrap:break-word;하지만 그것은 아무런 차이가 없습니다.

편집. JSFidle http://jsfiddle.net/TTKtb/ - 패널이 서로 옆에 오도록 오른쪽 열을 확장해야 합니다.

사용해 보십시오. 부팅스트랩 버튼의 스타일 정의에 공백 추가: normal. 또는 표시한 코드를 아래 코드로 바꿀 수 있습니다.

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

나는 당신의 바이올린이 어떻게 나오는지 보여주기 위해 여기에 업데이트했습니다.

이 클래스를 간단히 추가할 수 있습니다.

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}

FWIW, Boostrap 4.4에서 다음을 추가할 수 있습니다..text-wrap단추와 같은 스타일:

   <a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

https://getbootstrap.com/docs/4.4/utilities/text/ #텍스트 편집기 및 편집

이러한 스타일을 추가할 수 있으며 예상대로 작동합니다.

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}

언급URL : https://stackoverflow.com/questions/18996202/twitter-bootstrap-button-text-word-wrap