Restrict <p> to one line and ellipsize when necessary?

user_246114 0
Viewed 24730

I have this:

<ul>
  <li>
    <p>Some long text here</p>
  </li>
</ul>

is there a way to get the p text to be restricted to a single line, and have it ellipsize if it's going to be wider than the parent container?

Thanks

css
4 Answers

Use this CSS class for your paragraph.

.single-line{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
}
user_10112830
Related