부트 스트랩의 긴 링크 줄이기

Question

부트 스트랩 3.1을 사용하여 페이지를 디자인하고 있습니다. HTML 링크의 길이가 너무 길면 오버 플로우되어 모바일 버전에 가로 스크롤이 생성됩니다. 그것을 줄이고 줄임표로 대체 할 수있는 방법이 있습니까?

예 :

내가 필요로하는 대신 밖으로 확장, 그것은 국경 전에 잘릴해야한다는 것입니다. 어떻게 그럴 수 있니?

Answer 1

테두리에 텍스트가 흐르지 않게하려면 컨테이너에 overflow: hidden이 있어야하고 링크에 줄임표를 표시하려면 text-overflow: ellipsis으로 지정해야합니다.

.box { 
 
    background: #f99; 
 
    border: 1px solid #c66; 
 
    width: 100px; 
 
    padding: 7px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.nowrap { 
 
    white-space: nowrap; 
 
} 
 

 

 
.ellipsis { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="box"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div> 
 

 
<div class="box ellipsis"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div>