Use class to add overflow ellipsis instead of directly styling component

js/components/ascribe_detail/detail_property.js

@@ -35,27 +35,20 @@ const DetailProperty = React.createClass({
         const {
             children,
             className,
+            ellipsis,
             label,
             labelClassName,
             separator,
             valueClassName,
             value } = this.props;
 
-        const styles = this.props.ellipsis ? {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        } : null;
-
         return (
             <div className={classNames('row ascribe-detail-property', className)}>
                 <div className="row-same-height">
                     <div className={labelClassName}>
                         {label} {separator}
                     </div>
-                    <div
+                    <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
-                        className={valueClassName}
-                        style={styles}>
                         {children || value}
                     </div>
                 </div>

sass/main.scss

@@ -108,6 +108,12 @@ hr {
     color: $ascribe-dark-blue;
 }
 
+.add-overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .ascribe-subheader {
     padding-bottom: 10px;
     margin-top: -10px;