两个浮动 div 中没有分词答案

【问题标题】：No word break in two floating divs两个浮动 div 中没有分词
【发布时间】：2014-04-24 04:34:56
【问题描述】：

<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 类定义表格列的宽度

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

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

【问题讨论】：

发布你的 CSS。如果可以，请发布一个 jfiddle。
还有一个错字类
试试max-width ??

【解决方案1】：

Check out the Demo

我刚刚添加了一个break
标签

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

输出小提琴

另一种方式

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;

【讨论】：

我想把“Winner”和“Intrusion Detection System in Cloud Architecture”放在同一行。当项目名称很短时，它确实在同一行，但当项目名称很大时，它会转到下一行。

【解决方案2】：

给第一行的第一个 td 一些宽度，例如：查看演示：FIDDLE

<table class="project-table">
        <thead>
            <tr calss="align-top">
                <td class="short-col heading" width="200px">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>

【讨论】：

我想把“Winner”和“Intrusion Detection System in Cloud Architecture”放在同一行。当项目名称很短时，它确实在同一行，但当项目名称很大时，它会转到下一行。
Eta kaaj korbe。您只是指定该列宽。如果内容比该列宽宽，它将自动换行。