Search code examples
htmlcss

Hide last character in an HTML element with CSS

Is it possible to remove or simply hide the very last character in an HTML element with CSS only?

When I search for this all I find is javascript solutions.

Solution

  • Use CSS3 text-overflow.

    (More information about text-overflow)

    Live demo on jsfiddle

    CSS:

    #txt{
    position:relative;
    padding:7px;
    text-align:justify;
    background:#e7e7e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    Working in: (latest versions)

    • firefox
    • chrome
    • opera
    • ie ( does not matter :D )