I have a web design requirement to have a headline like this:
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | float left DIV A | | DIV C || float right DIV B ||
| +---------------------+ +-------++------------------------+|
+-------------------------------------------------------------+
The header has 3 parts: Div A, B, C. DIV A floats to the left, and DIV B and C float to the right. DIV A and DIV B may contain long text. Thus, overflowing text is truncated as an ellipsis. DIV C has short text; its contents should not be truncated.
I tried to make HTML as shown below:
<html>
<head>
<style>
.header
{
width: 100%;
border: 2px red;
overflow: hidden;
}
.DivA
{
float: left;
}
.DivC
{
float: right;
white-space:nowrap;
}
.DivB
{
float: right;
}
.clear
{
clear: both;
}
.DivA, .DivB
{
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<div class="DivA">
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
</div>
<div class="DivB">
Good bye Good bye
Good bye Good bye
Good bye Good bye
</div>
<div class="DivC">
No Ellipsis
</div>
<div class="clear">
</div>
</div>
</body>
</html>
Text overflow: ellipsis only works if DIV A and DIV B are wide (in my case I set them to 45%).
DIV C. DIV C , . div C . .
DIV A DIV B , DIV C ?