html - 两个 float div 中没有分词

Question

<table class="project-table">
        <thead>
            <tr class="align-top">
                <td class="short-col heading">Project Name</td>
                <td class="short-col heading align-center">Project Id</td>
                <td class="short-col heading">Date &amp; Time</td>
                <td class="short-col heading">Student</td>
            </tr>
        </thead>
        <tbody>


                <tr class="bottom-row-dashed">
                    <td class="long-col">
                            <div class="achievement-box float-left">Winner</div>

                        <div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
                        <div class="clear"></div>
                    </td>
                    <td class="short-col align-center">1</td>
                    <td class="short-col">01 Apr 2014, 09:30 PM</td>
                    <td class="short-col">Sayan Chowdhury</td>
                </tr>
            <tr>
        </tr></tbody>
    </table>

手写笔文件:

table.project-table
    font-size: 13px
    margin-top: 10px
    width: 100%
    border-collapse: collapse
    .bottom-row-dashed
        border-bottom: 1px dashed border-color

    .margin-right
        margin-right: 2px
    .margin-left
        margin-left: 2px

    td
        &.short-col
            width: 1%
        &.large-col
            width: 20%
        &.medium-col
            width: 10%
    tr
        &.align-top
            vertical-align: top

包含“Winner”和“Intrusion Detection System in Cloud Architecture”的div 向左浮动。我添加了 word-wrap:break-word; 但它无助于打破术语“云架构中的入侵检测系统”。 short-col 和long-col 类定义了表格列的宽度

如何根据宽度打破术语“云架构中的入侵检测系统”？

编辑:我想将“云架构中的入侵检测系统”和“赢家”放在同一行，但因为这个词应该根据宽度在中间中断

Answer 1

Check out the Demo

我刚刚添加了一个 break
标签

 <div class="float-left margin-left">Intrusion Detection<br> System in Cloud Architecture</div>

输出 fiddle

另一种方式

Another way of Doing it

设置最大宽度就可以了

 th{
     padding-left:30px;
    }
    td{
     padding-left:30px;
          max-width: 200px; /*or whatever*/
      word-wrap: break-word;
    }
    th:first-child{
        padding-left:0px;
    }
    td:first-child{
        padding-left:0px;
    }

使用自动换行和最大宽度输出

Check this out latest

 display:inline;