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

186

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

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

[이것은 부입니다] 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/- 패널을 나란히 놓으 려면 오른쪽 열을 확장해야합니다.

— M_ 베커
소스

jsfiddle 또는 그에 대한 테스트를 만들 수 있습니까 ??

— 자바 스크립트 코더

1

<br>줄 바꿈을 삽입 할 위치에 삽입하지 않는 이유는 무엇 입니까?

— ntalbs

버튼의 내용은 데이터베이스에서로드 될 때마다 달라 지므로 실행 불가능합니다.

— M_Becker

다른 방법으로 jsfiddle.net/TTKtb/4

— 자바 스크립트 코더

텍스트를 줄 바꿈하려는 지점에 <br>을 삽입하면 줄 바꿈이 나타나고 텍스트가 줄 바꿈됩니다. 나는 당신이 많은 텍스트를 가지고있을 때 이것이 해결책이 아니라는 것을 알고 싶습니다.

— pebox11

360

이것을보십시오 : 공백 추가 : 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>

나는 그것이 나오는 방법을 보여주기 위해 여기 에서 바이올린을 업데이트 했습니다.

— 브라이언 키 뉴아
소스

와우 그냥 찾아 봐 CSS 코드가 존재한다는 것을 몰랐습니다. 당신의 도움을 주셔서 감사합니다! 이것을 해결하기 위해 몇 시간을 보냈습니다.

— M_Becker

4

@ user2063032이 사람은 공백 링크를 가장 잘 설명 할 수 있다고 생각합니다 .

— Brian Kinyua

걱정하지 마십시오. 스택 오버플로에서 매일 무언가를 배웁니다. 또한 요소, 즉 버튼의 너비가 지정된 경우 공백 속성이 잘 작동합니다.

— Brian Kinyua

@ user2063032 답변이 문제를 해결 한 경우 수락하십시오. 감사합니다 :)

— Brian Kinyua

2

몇 년 후 ... 다른 ## 시간을 절약했습니다. 감사.

— Nie Selam

67

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

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

— Getsomepeaches
소스

5

word-break: normal부트 스트랩으로 설정된 값을 재정의 해야 했습니다. 그러나 그것은 매력을 발휘했습니다!

— crowmagnumb

1

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

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

— 닭
소스

인라인 스타일을 사용하면 해당 버튼 하나에서만이 문제를 해결할 수 있습니다. 프로젝트 전체에서 사용할 수 있도록 클래스에 추가하십시오. 앵커의 클래스에서 col 정의를 사용하는 것은 부트 스트랩을 사용하는 동안 나쁜 습관으로 간주됩니다.

— Getsomepeaches

1

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/#text-wrapping-and-overflow

— hwjp
소스