Css Is Not Being Aplied, Maybe Due To Character's Not Being Escaped?

I need to clarify: I've been stuck on this for an hour now because I'm not sure what the issue is. I pasted a full example which breaks on jsbin.com as well. JSBIN LINK Code

Solution 1:

This is quite simple,

• you need to set table-layout:fixed to table
• you were applying break-word on the wrong td
• avoid using inline styles
• I'm gonna guess and think you are after vertical-align:top instead of text-top

Snippet

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
}

<table><tr><tdclass="darkstyle">
      URI
    </td><tdclass="lightstyle">someurl</td></tr><tr><tdclass="darkstyle">
      Confidence
    </td><tdclass="lightstyle">Low</td></tr><tr><tdclass="darkstyle">
      Attack
    </td><tdclass="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><tdclass="darkstyle">
      OtherInfo
    </td><tdclass="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>

Solution 2:

One solution would be to truncate the text and show the full copy on hover via a tooltip. Here is an option done via 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;

}

And update the html as...

<tdclass="lightstyle"style="width: 85%;"><abbrclass="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>

Share