Quebra de texto CSS em div

100

Eu tenho um div com largura de 250px. Quando o texto interno é mais amplo do que isso, quero que ele se desfaça. O div é float: left e agora tem um overflow. Quero que a barra de rolagem desapareça usando a quebra de linha. Como posso conseguir isso?

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

Respostas:

110

Como Andrew disse, seu texto deveria fazer exatamente isso.

Há uma instância em que posso pensar que se comportará da maneira que você sugeriu, se você tiver a propriedade de espaço em branco definida.

Veja se você não tem o seguinte em seu CSS em algum lugar:

white-space: nowrap

Isso fará com que o texto continue na mesma linha até ser interrompido por uma quebra de linha.

OK, minhas desculpas, não tenho certeza se editei ou adicionei a marcação depois (não vi a princípio).

A propriedade overflow-x é o que faz com que a barra de rolagem apareça. Remova isso e o div se ajustará tão alto quanto precisa ser para conter todo o seu texto.

Jayx
fonte
Você está certo. A treeview é construída pela Microsoft e quando eu verifico a fonte, em todos os lugares, espaço em branco: nowrap é usado
Martijn
Ah bom. PhoneGap + jquery mobile resulta em muito estilo para classificar. Adicionando "espaço em branco: normal; overflow: auto;" isso me esclareceu.
Michael Blankenship
2
experimente o white-space:normal;seu elemento para substituir a herança white-space: nowrapde seu pai
gordon
102

Ou simplesmente use

word-wrap: break-word;

compatível com navegadores IE 5.5+, Firefox 3.5+ e WebKit, como Chrome e Safari.

Jc Figueroa
fonte
19

tente white-space:normal;Isto irá substituir a herançawhite-space:nowrap;

Gordon
fonte
8

É muito difícil dizer definitivamente sem ver a aparência do html renderizado e quais estilos estão sendo aplicados aos elementos dentro do div treeview, mas o que me salta à vista imediatamente é o

overflow-x: scroll;

O que acontece se você remover isso?

Andrew
fonte
Em seguida, o texto ultrapassa o limite
Martijn
3

você pode usar:

overflow-x: auto; 

Se você definir 'auto' em overflow-x, a rolagem aparecerá apenas quando o tamanho interno for maior que a área DIV

Tamil Selvan C
fonte
2

Estou um pouco surpreso por não ser apenas isso. Poderia haver outro elemento dentro do div que tenha uma largura definida para algo maior que 250?

Andrew
fonte
1

Definir apenas as propriedades css de largura e flutuação obteria um painel envolvente. O exemplo a seguir funciona muito bem:

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

Talvez existam outros estilos que modificam a aparência?

Aleris
fonte
Não funciona. No meu div, eu uso hiperlinks. Talvez isso tenha algo a ver com isso?
Martijn