2016-08-08 4 views
-1

버튼이 자동으로 세로로 커지면서 전체 라벨을 표시하는 대신 부트 스트랩과 글꼴을 사용하여 잘라낼 수있는 방법이 있는지 궁금합니다.부트 스트랩 버튼 두 번째 줄로 접기

코드 :

<div class="well well-sm"> 
    <p><h5 style="underline"><u>Social Media:</u></h5></p> 
    <p> 
    <a href="" class="btn btn-block btn-social btn-facebook" target="_blank"> 
     <i class="fa fa-facebook"></i> <font size="2"> Like us on Facebook</font> 
    </a> 
    <a href="" class="btn btn-block btn-social btn-twitter" target="_blank"> 
     <i class="fa fa-twitter"></i> <font size="2"> Follow us on Twitter</font> 
    </a> 
    <a href="" class="btn btn-block btn-social btn-pinterest" target="_blank"> 
     <span class="fa fa-youtube-play"></span> <font size="2"> Watch us on YouTube</font> 
    </a> 
    </p> 
</div> 

전류 출력 :

____Small의 screen_____________large 화면이

enter image description here

... 대형 스크린이 좋다하지만 난 작은 화면 버튼과 같은 출력을 갖고 싶어 :

우리처럼 < - 첫 선

페이스 북 < - 두번째 줄에

+0

'a {word-wrap : break-word; }'to your CSS – Pugazh

+0

'white-space : normal;도 시도하십시오. – Cobote

답변

1

는 확실히 (라이언에 의해) 위의 대답은 부트 스트랩에 대한 word-wrap: break-word;하지만 일부 하이라이트를 작동합니다.

부트 스트랩에는 숨겨진 CSS가있는 경향이 있습니다.

특히 1 : overflow: hidden; 가끔 작동하지 않는 작품입니다!

마지막으로 inspect 웹 사이트를 방문하여 코드에 정확히 무엇이 일어나는지 확인하십시오.

호프는이 문제를 해결하기 위해 노력하고 있습니다.

관련 문제