Broken Texts

Question

Broken Texts

Navigation

#1 by (0 votes)

0

I have an imageButton that represents files, and a label in it:

<div class="block">
    <asp:HiddenField ID="idDirectorio" runat="server" Value='<%# Eval("guid") %>' />
    <asp:HiddenField ID="isFolder" runat="server" Value='<%# Eval("isFolder") %>' />

    <asp:ImageButton ID="btSend" runat="server" ImageUrl='<%# Eval("imgPath") %>' OnClick="btSend_Click" />

    <div class="bottom">
        <asp:CheckBox ID="check" runat="server" OnCheckedChanged="check_CheckedChanged" AutoPostBack="true" />
        <asp:Label ID="lblNome" runat="server" Text='<%# Eval("xInfo") %>' />
    </div>
</div>

Current CSS:

.block {
    display: inline-block;
    height: 80x;
    width: 80px;
    margin: 1px;
}

.block .bottom {
    font-size:small;
    height: 27px;
    left: 0px;
    right: 0px;  
    margin-bottom:10px;
}

.block .bottom input {
    height: 75%;
    width: 100%;
    padding-bottom:50px;
}

.block .bottom spam,
.block .bottom label {
    max-width: 80px;
    overflow: hidden;
}

Ugly result:

In short the names pass to each other, and do not break the line, and files that come from the windows with the dash - also break. How to fix this?

html css

asked by anonymous 23.03.2015 / 20:40

1 answer

Primefaces 5.0 skinSimple attribute does not appear Generate entities from tables with JBossTools

score 0 · Accepted Answer

First fix spam with "m" for span with "n". Add the property word-wrap with value break-word :

.block .bottom span,
.block .bottom label {
    max-width: 80px;
    overflow: hidden;
    word-wrap: break-word;
}

Documentation

Also add vertical-align to align items:

.block {
    display: inline-block;
    height: 80x;
    width: 80px;
    margin: 1px;
    vertical-align: top;
}