How to cut off text that is longer than the space available and show '…'?


Tags: html,asp.net,css3

Problem :

I have a title of video that is a long title and I would like to display this in a single line like this:

Title: TxT TxT TxT ...

But is displaying like this for now:

Title: TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT TxT

here is a Div code

<div class="vid-title"><%# Eval("Title")%></div>

and her is a css:

.vid-title {
  font-size: 20px; font-weight: bold; margin: 0px;
}

I would like the text to cut off when there is no more space, and show '...' at the end. How to achieve this?



Solution :

Try this

div {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
    color: red;
}

JS Fiddle Demo


    CSS Howto..

    How to build a CSS style with a LESS mixin parameter?

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to fix incorrect element size on browser scaling?

    Webpack bundle does not show css

    How to enable Stylus url() rewrites

    On css: if text line is break show dots

    How to get a border around this polygon?

    How to move this button?

    CSS how to round of percent values to whole number pixel

    How to center a child div with a smaller parent div

    Not sure how to use css selectors

    How to ignore parent's width limit in CSS

    How to flow text from a box to another with CSS

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    Changing the color of the tomb. How do I do this?

    How to add a disabled internal Style node to HTML5 DOM?

    How can I reload css styles when change windows width?

    How to change css classes with a button click in javascript?

    CSS how to position element fixed just for y-axis?

    how to position several div tags over each other

    how to deal with repeated letters in a javascript hangman game

    How to create css shadow effect [duplicate]

    how to make NGINX serve static content like .js, .css, .html?

    Learning CSS, how to use stylesheet with master page

    How to use weather API to create my weather HTML page [closed]

    How can I get an absolute element to float right within its parent?

    How to use several css classes to one element?

    How can
    /
    /
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to create an enumerated tabular environment in HTML/CSS?