Broken texts

Question

I have an imageButton that represents files, and a label on 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>

CSS Current:

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

Summing up the names pass to each other, and do not break the line, and files that comes from windows with dash - , breaks too. How to fix it?

Answer 1

First corrects spam with "m" to span with "n". Add property word-wrap worthwhile break-word:

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

Documentation

Also add vertical-align to align the items:

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