트위터 부트 스트랩 버튼 텍스트 워드 랩

트위터 부트 스트랩 버튼 텍스트 워드 랩

---

내 인생에서는이 트위터 부트 스트랩 버튼을 여러 줄로 줄 바꿈 할 수 없습니다.

이미지를 게시 할 수 없으므로이 작업이 수행됩니다.

[이것은 부입니다] tton text

나는 다음과 같이 보이기를 원합니다

[이것이 ]

[버튼 텍스트]

<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;했지만 아무런 차이가 없습니다.

편집하다. JSFiddle 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; 
}

---

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

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; word-wrap: break-word; word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>

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