너비가 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>
모양을 수정하는 다른 스타일이있을 수 있습니까?
