jcbridwe jcbridwe - 22 days ago 7
CSS Question

Applying css/style to a databind in a span element

I am trying to apply css/style to a span element that uses a databind (from knockout) to grab a text name ("

config.title
"). My goal is to set a maximum pixel width of the string/text name that is grabbed and populated inside the span. Why wouldn't this work? Is there a better way to do this? Note: I've also tried using
style="textOverflow: ellipsis"
which didn't work either.

<span style="maxWidth: 20px" data-bind="text: config.title"></span>

Answer

Use display property with <span>.

I've made a snippet for demonstration, please have a look:

.myspan {
  display: inline-block;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<span class="myspan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam facere, dignissimos! Nam porro suscipit, perspiciatis consectetur dolor explicabo voluptatem? Earum vel explicabo neque perspiciatis, dicta fugit dolorem dignissimos obcaecati quis.</span> 

Hope this helps!