¿CSS no se está aplicando, tal vez debido a que el personaje no se está escapando?

Necesito aclarar: he estado estancado en esto por una hora porque no estoy seguro de cuál es el problema. He pegado un ejemplo completo que también se rompe en jsbin.com.

ENLACE JSBIN

Código

     JS Bin   
URI
someurl
Confidence
Low
Attack
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.
OtherInfo
aaaThe origin domain used for comparison was: myurl.ca DERPCOOKIE="" COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5 MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3 MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34

EDITAR:

CSS

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

darkstyle es lo mismo, solo que de diferente color.

Si elimina todo en el div que contiene

aaaThe or Then, funciona bien.

El "" se muestra como &quot lugar de “, ¿cómo soluciono esto?

Es solo el retorno de carro por lo que no debería afectarlo mal.

Sin embargo, las cuerdas son muy largas y ¿podrían ser la razón por la que está rompiendo el width la mesa?

Esto es bastante simple,

  • necesita configurar la table-layout:fixed a la table
  • estabas aplicando la break-word en el td incorrecto
  • evitar el uso de estilos en línea
  • Voy a adivinar y pensar que estás detrás vertical-align:top lugar de text-top

Retazo

 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 } 
 
URI someurl
Confidence Low
Attack 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.
OtherInfo The origin domain used for comparison was: myurl.ca DERPCOOKIE="" COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5 MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3 MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34

Una solución sería truncar el texto y mostrar la copia completa al pasar el cursor a través de una información sobre herramientas. Aquí hay una opción hecha a través de 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; } 

Y actualizar el html como …

    aaaThe origin domain used for comparison was: 
 myurl.ca
 DERPCOOKIE=""
 COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5
 MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3
 MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34