CSS 줄임표를 사용할 수 없습니다.

저는 응답 성이 뛰어난 웹 디자인에 익숙하며 저는 angularJS를 배우기 위해 간단한 할일 응용 프로그램을 만들고 있습니다. 이제 내 문제는 너무 길어서 레이아웃을 어기는 텍스트를 어떻게 처리 할 수 있는가이다.CSS 줄임표를 사용할 수 없습니다.

여기에서 어떻게 깨 졌는지 확인할 수 있습니다. enter image description here

enter image description here

html로 & CSS는 지금 :

참고 :이 <div class="span12">

<li> 
    <div> 
     <span class="taskshorter">{{t.TaskName}}</span> 
     <div class="pull-right"> 
      <span class="label label-info ">{{t.EstimatedTime}}</span> 
      <span class="label label-important">{{t.EstimatedTimeLeft}}</span> 
      <i class="icon-chevron-right"></i> 
     </div> 
    </div> 
</li>

및 CSS

.taskshorter { 
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    width: 20px; 
    height: 1.2em; 
}

,691에 싸여있다

하지만 작동하지 않는 것 같습니다. 오히려 텍스트를 클립하는 자바 스크립트 코드를 작성해야합니까? 아니면 쉽게 고칠 수있는 뭔가가 누락 되었습니까?

또한 Twitter 부풀 유체 레이아웃을 사용하고 있습니다.

출처

2013-05-02 ArniReynir

오버플로로 무엇을하고 싶습니까? 그냥 잘라내거나 텍스트를 감싸시겠습니까? 첫 번째 것은 매우 간단하고 두 번째는 약간 복잡 할 수 있습니다. –

레이아웃을 깨뜨리지 않도록 잘 자릅니다. – ArniReynir

width을 인라인 요소에 설정할 수 없습니다. display:inline-block을 CSS에 추가하십시오.

출처

2013-05-02 14:18:08

부적처럼 일했습니다. 감사합니다. – ArniReynir

깨끗하지는 않지만 쉬운 해결 방법은 기본 요소와 동일한 배경을 올바른 요소에 제공하는 것입니다.

.pull-right { 
    background-color: blue; /* your bg color */ 
    float: right; 
    box-shadow: -2px 0 4px blue; /* just for smoother "cut" */ 
}

테스트를 거치지 않았으므로 조정이 더 필요할 수 있습니다. JSFiddle에 예제를 넣으면 조정할 수 있습니다.

출처

2013-05-02 14:18:20

CSS 줄임표를 사용할 수 없습니다.

답변

관련 문제