[css] div의 CSS 워드 랩핑

Program / 글쓴이

너비가 250px 인 div가 있습니다. 내부 텍스트가 그보다 넓을 때 나는 그것을 분해하고 싶습니다. div는 float : left이고 이제 오버플로가 있습니다. 단어 줄 바꿈을 사용하여 스크롤바를 없애고 싶습니다. 어떻게하면 되나요?

<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;
}

답변

Andrew가 말했듯이, 당신의 텍스트는 그렇게해야합니다.

내가 제안한 방식으로 작동 할 것이라고 생각할 수있는 한 가지 인스턴스가 있습니다. 즉, 공백 속성을 설정 한 경우입니다.

CSS 어딘가에 다음이 없는지 확인하십시오.

white-space: nowrap

그러면 줄 바꿈으로 인해 중단 될 때까지 텍스트가 같은 줄에 계속 표시됩니다.

좋아요, 죄송합니다. 나중에 마크 업을 편집하거나 추가했는지 확실하지 않습니다 (처음에는 보지 못함).

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

답변

또는 단순히 사용 

word-wrap: break-word;

IE 5.5+, Firefox 3.5+ 및 Chrome 및 Safari와 같은 WebKit 브라우저에서 지원됩니다.

답변

시도 white-space:normal;상속 우선합니다이를white-space:nowrap;

답변

렌더링 된 html이 어떻게 생겼는지, 그리고 treeview div 내의 요소에 어떤 스타일이 적용되고 있는지 확인하지 않고 명확하게 말하기는 꽤 어렵지만, 바로 눈에 띄는 것은 

overflow-x: scroll;

그것을 제거하면 어떻게됩니까?

답변

당신이 사용할 수있는:

overflow-x: auto;

overflow-x에서 ‘auto’를 설정하면 내부 크기가 DIV 영역보다 큰 경우에만 스크롤이 나타납니다.

답변

나는 그것이 단지 그렇게하지 않는다는 것이 조금 놀랍습니다. 너비가 250보다 큰 것으로 설정된 div 내부에 다른 요소가 있습니까?

답변

width 및 float css 속성 만 설정하면 래핑 패널이 표시됩니다. 다음 예제는 잘 작동합니다.

<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>

모양을 수정하는 다른 스타일이있을 수 있습니까?