Question

我需要澄清一下：我现在已经坚持了一个小时，因为我不确定问题是什么。我在jsbin.com上粘贴了一个完整的例子。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <table width="100%">
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>URI</div>
            </td>
            <td class="lightstyle" style="width: 85%;">someurl</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>Confidence</div>
            </td>
            <td class="lightstyle" style="width: 85%;">Low</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>Attack</div>
            </td>
            <td class="lightstyle" style="width: 85%;">Cookies set from a subdomain like app.foo.bar are transmitted only to that domain by the browser. However, cookies scoped to a parent-level domain may be transmitted to the parent, or any subdomain of the parent.</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%; word-wrap: break-word;">
                <div>OtherInfo</div>
            </td>
            <td class="lightstyle" style="width: 85%;">
                <div>aaaThe origin domain used for comparison was: &#13;
myurl.ca&#13;
DERPCOOKIE=&amp;quot;&amp;quot;&#13;
COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13;
MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13;
MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

编辑：

CSS

.lightstylediv{
  color: #000;
  font-weight: bold;
}
.lightstyle{
  vertical-align: text-top; 
  background:#b3b3b3;
}

darkstyle是一回事，只是颜色不同。

如果您删除包含<div>aaaThe or的div中的所有内容，那么它可以正常工作。

&quot;&quot;显示为&quot而不是“，我该如何解决这个问题？

只是回车，所以不应该影响它。

字符串很长但它们可能是它打破表width的原因？

Answer 1

这很简单，

您需要将table-layout:fixed设置为table
您在错误的break-word

td

避免使用内联样式
我会猜测并认为你在vertical-align:top之后而不是text-top

段

＆＃13;

table {
  table-layout: fixed;
  width: 100%
}
.darkstyle {
  color: #000;
  font-weight: 700;
  width: 15%;
  vertical-align: top;
}
.lightstyle {
  background: #b3b3b3;
  width: 85%;
  word-wrap: break-word
}

＆＃13;

<table>
  <tr>
    <td class="darkstyle">
      URI
    </td>
    <td class="lightstyle">someurl</td>
  </tr>
  <tr>
    <td class="darkstyle">
      Confidence
    </td>
    <td class="lightstyle">Low</td>
  </tr>
  <tr>
    <td class="darkstyle">
      Attack
    </td>
    <td class="lightstyle">Cookies set from a subdomain like app.foo.bar are transmitted only to that domain by the browser. However, cookies scoped to a parent-level domain may be transmitted to the parent, or any subdomain of the parent.</td>
  </tr>
  <tr>
    <td class="darkstyle">
      OtherInfo
    </td>
    <td class="lightstyle">
      The origin domain used for comparison was: &#13; myurl.ca&#13; DERPCOOKIE=&amp;quot;&amp;quot;&#13; COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13; MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13;
      MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;
    </td>
  </tr>
</table>

＆＃13;

Answer 2

一种解决方案是截断文本并通过工具提示显示悬停时的完整副本。这是一个通过css ...

完成的选项

http://jsbin.com/koheja/edit?html,css,js,output

.ellipsis {
  cursor: help;
  display:block;
  width:250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px dotted #f00;

}

并将html更新为...

         <td class="lightstyle" style="width: 85%;">
                  <abbr class="ellipsis" title="aaaThe origin domain used for comparison was: &#13;
    myurl.ca&#13;
    DERPCOOKIE=&amp;quot;&amp;quot;&#13;
    COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13;
    MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13; MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;">
aaaThe origin domain used for comparison was: &#13;
    myurl.ca&#13;
    DERPCOOKIE=&amp;quot;&amp;quot;&#13;
    COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13;
    MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13;
    MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;
                    </abbr>
                </td>

CSS没有被应用，可能是因为角色没有被转义？

代码

CSS

2 个答案:

段