Dotted Text in CSS

How to Add a Dotted Underline Beneath HTML Text

It's impossible without CSS. In fact, the <u> tag is simply adding text-decoration:underline to the text with the browser's built-in CSS.

Here's what you can do:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

HTML Large text with dotted end

This is the CSS property you're looking for:

text-overflow: ellipsis;

For example:

<div style="width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    United States of America
</div>

Will display

United St...

The text must be in one line (hence the white-space: nowrap), and overflow a box where the overflow is hidden (hence the overflow: hidden). Fiddle available here.

How can I show dots (...) in a span with hidden overflow?

For this you can use text-overflow: ellipsis; property. Write like this

span {    display: inline-block;    width: 180px;    white-space: nowrap;    overflow: hidden !important;    text-overflow: ellipsis;}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

On css: if text line is break show dots

Are you talking about an ellipsis? Add this to your CSS

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

Fiddle: http://jsfiddle.net/5UPRU/7/

How to create double, dotted underline for text in css

You need to use at least two HTML elements to achieve this:

<span class="outer">
    <span class="inner">Your text here.</span>
</span>

Both .outer and .inner should have the same dotted bottom border, but .outer should have a few pixels of padding-bottom as well.

See an example here.

How to display text, a dotted line then more text spanning the width of the page?

I'd suggest that, perhaps, a ul would be one option:

<ul>
    <li><span class="definition">Name:</span><span class="defined">Engineer</span></li>
    <li><span class="definition">Factory location:</span><span class="defined">not invoice address</span></li>
</ul>

CSS:

ul li {
    border-bottom: 2px dotted #ccc;
}

span.defined {
    float: right;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

JS Fiddle demo.

Edited to correct the CSS. And the HTML. Oops.

Edited in response to @Leigh's (accurate) comment:

This isn't doing what the OP asked for? This just gives a dotted underline (FF 3.5), not dots between the two pieces of text.

I've adjusted the CSS a little to hide the dotted border under the spans:

ul li {
    border-bottom: 2px dotted #ccc;
    line-height: 2em;
    text-align: right;
    clear: both;
    margin: 0.5em 0 0 0;
}

span.definition {
    float: left;
}

span.defined:before {
    content: "(";
}

span.defined:after {
    content: ")";
}

span {
    display: inline-block;
    border: 2px solid #fff;
    padding: 0;
    margin: 0 0 -2px 0;
}

Admittedly this is only tested in Chrome 8, and Firefox 3.6, Ubuntu 10.10.

Updated JS Fiddle demo.