2009-02-02 6 views
80

div가 250px 크기입니다. innertext가 그보다 더 넓은 경우 나는 그것이 파괴되기를 원한다. div는 float : left이고 이제 오버플로가 있습니다. 단어 줄 바꿈을 사용하여 스크롤 막대를 사라지게하십시오. 내가 어떻게 이걸 얻을 수 있니?div의 CSS 단어 줄 바꾸기

<div id="Treeview"> 
<div id="HandboekBox"> 
    <div id="HandboekTitel"> 
     <asp:Label ID="lblManual" runat="server"></asp:Label> 
    </div> 
    <div id="HandboekClose"> 
     <asp:ImageButton ID="btnCloseManual" runat="server" 
      ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
      BorderWidth="0" ToolTip="Sluit handboek" /> 
    </div> 
</div> 
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"> 
    <Nodes> 

    </Nodes> 
</asp:TreeView> 
</div> 

CSS :

#Treeview 
{ 
padding-right: 5px; 
width: 250px; 
height: 100%; 
float: left; 
border-right: solid 1px black; 
overflow-x: scroll; 
} 

답변

85

앤드류 (Andrew)가 말했듯이, 텍스트는 그렇게해야합니다.

공백 속성이 설정된 경우 사용자가 제안하는 방식으로 동작하는 것으로 생각할 수있는 인스턴스가 하나 있습니다. 줄 바꿈에 의해 중단 될 때까지 텍스트가 같은 줄에 계속하게됩니다

white-space: nowrap 

을 : 당신이 어딘가에 당신의 CSS에 다음이없는 경우

을 참조하십시오.

좋아, 나중에 수정하거나 마크 업을 추가했는지 확실하지 않습니다. 처음에는 보이지 않았습니다.

overflow-x 속성은 스크롤 막대가 나타나는 원인입니다. 그것을 제거하면 div는 모든 텍스트를 포함하는 데 필요한만큼 높게 조정됩니다.

+0

네 말이 맞아. treeview는 마이크로 소프트에 의해 빌드되며 소스를 확인하면 어디에서나 white-space : nowrap이 사용됩니다. – Martijn

+0

아, 좋습니다. PhoneGap + jquery 모바일은 많은 스타일을 통해 정렬됩니다."white-space : normal; overflow : auto;"를 추가함으로써 그게 나를 분류했다. –

+1

당신의 엘레멘트에'white-space : normal;'을 시도하여 그 부모로부터'white-space : nowrap'를 상속한다. – gordon

1

그냥 그렇게하지 않는 나는 조금 놀랐어요. div 안에 폭이 250보다 큰 다른 요소가있을 수 있습니까?

0

width 및 float CSS 속성 만 설정하면 포장 패널이 생성됩니다. 단지 벌금 folowing 예를 들어 작업 :

<div style="float:left; width: 250px"> 
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam ornare vestibulum, metus massa 
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div> 

어쩌면 모양을 수정하는 대신에 다른 스타일이있다?

+0

그것은 작동하지 않습니다 상속 우선합니다 white-space:normal;을 시도합니다. 내 div 하이퍼 링크를 사용하십시오. 어쩌면 그것과 관련이있는 것일까 요? – Martijn

5

그것은 어떤 스타일이 트 리뷰 DIV 내의 요소에 적용되고 있는지 렌더링 된 HTML의 모양과 보지 않고 결정적으로 말을 꽤 어렵지만, 바로 나를 밖으로 점프 것은

overflow-x: scroll; 
입니다

제거하면 어떻게됩니까?

+0

그런 다음 텍스트는 경계선을 넘는다. – Martijn

2

당신은 사용할 수 있습니다 : 그 DIV 영역에게 가장 큰 경우에만 내부 크기

overflow-x: auto; 

당신이 오버 플로우-X에서 '자동'으로 설정하면이 스크롤이 나타납니다

93

하거나 사용

word-wrap: break-word; 
IE 5.5 이상, Firefox 3.5 이상 및 Chrome 및 Safari와 같은 WebKit 브라우저에서

이 지원됩니다.

6

이것은 white-space:nowrap;