Link to jsfiddle: http://jsfiddle.net/WBZng/1/
I have a HTML structure that looks like this:
<div>
<input/>
<span>Label comes here...</span>
</div>
Both input and span should have display:inline. Also, span has word-wrap:break-word so that a long text without space still becomes wrapped. However, if the text is long, then the <span> is displayed in a new line instead of preserving display:inline-block. This is not an issue if there is a space in <span>.
You can consider giving ellipsis to the span element:
.panel span {
width: 20px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Fiddle: http://jsfiddle.net/WBZng/3/
Related
I want white-space: nowrap to show only single dot when the text is long
For Example the text is This is a very long text and I want to display This is. not This is...
Current Snippet looks like this
<div>
<div>This is a long text</div>
<svg></svg>
</div>
The text-overflow CSS property allows you to provide a string that is used to signal additional content to users in case of an overflow. I think that would accomplish what you're looking for.
text-overflow: "."
It's important to say, this function is only available on firefox 9+.
One option is to use display: flex and ::after on a containing div:
span {
margin: 0;
max-width: 45px;
overflow: hidden;
white-space: nowrap;
}
.container {
display: flex;
}
.container::after {
content: '.';
}
<div>
<div class="container">
<span>This is a long text</span>
</div>
<svg></svg>
</div>
Not ideal but it works.
I have a div with different number of span inside depending on my code, my problem is, sometimes the last span does not fit the space and everything lost the align, what I want to do is applied my "truncate" class to the last element if needed, there is an example:
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
with this configuration, and also aplying "truncate" everything moved to left, and I stop watching "one" instead "four" as I want, either the "..." are not shown.
I also tried aplied truncate to the last child with same result:
.truncate:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Where is my mistake?
Check out the :last-child pseudo-class.
Might not be relevant to you now, but I had this problem, and I solved it with flex-shrink: 0 which tells certain elements never to shrink, which means that last element shrinks.
See example: https://jsfiddle.net/68usz20p/2/
div {
display: flex;
overflow: hidden;
width: 175px;
border: 1px solid red;
}
div span:not(:last-child) {
margin-right: 1ch;
flex-shrink: 0;
}
div span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You can using css :last-child Selector
.truncate span:last-child {
display:none; visibility:hidden;
}
<div class="truncate">
<span> ONE </span>
<span> TWO </span>
<span> THREE </span>
<span> FOUR </span>
</div>
Preview at https://jsfiddle.net/itsselvam/yt9srxLo/
I have a div with mixed display: inline and display: inline-block elements, and I'm trying to get it long lines to wrap properly when the parent has a word-wrap: break-word applied.
So for example if I have
<div><span>hihihi</span><span style='display: inline-block'>hello</span>moremoremore</div>
I would like the text wrapping to behave as word-wrap: break-word normally does, and break where needed. What I am getting instead is a break right after the inline-block element. Is there any way to change this behavior?
I set up a minimal example in a codepen: http://codepen.io/anon/pen/vEXdMR
To see what I want, just comment out display: inline-block in the styling for the <b>.
Try setting white-space: pre in your parent div
div
{
margin: 20px;
width: 60px;
word-wrap: break-word;
white-space: pre;
}
Here's an updated codepen: http://codepen.io/anon/pen/ByLYgv
As per documentation, taken from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
pre
Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.
By adding property display: contents; to span. It works for me.
A representative code sample:
<div style="width:300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<ul>
<li>Long name: <span>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</span></li>
</ul>
</div>
http://jsfiddle.net/G57LE/
It seems only the overflow property will do anything here.
How do I get the text to do an ellipsis on overflow for this div (where the ellipsis happens just before the end of the div)? Thanks!
Because the text isn't in the div itself. You would have to apply the width and overflow attributes to the span itself.
Possible solution for you: CSS text ellipsis when using variable width divs
add this
display: inline-block; overflow: hidden; text-overflow: ellipsis; width:300px;
to span's class .value
here is http://jsfiddle.net/G57LE/5/
I'm trying to get an ellipsis to display on my long text using CSS. This seems to work fine when the text doesn't contain spaces, and so can't be broken (i.e. word wrapped) but when it contains spaces the ellipsis doesn't appear.
My code so are is:
<!DOCTYPE html>
<html>
<head>
<style>
span {
width: 150px;
display: inline-block;
border: 1px dotted blue;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
}
</style>
</head>
<body>
<div>
<span>
This is some long text that I want to have an ellipsis on.
</span>
</div>
<div>
<span>
afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl
</span>
</div>
<body>
</html>
Here's my fiddle.
If you add white-space:nowrap ellipsis will come into picture. Reason is your text with spaces will wrap down in case of spaces and it doesn't need to have ellipsis. You can see it in action if you remove your overflow-hidden and text will be displayed wrapped.
span {
width: 150px;
display: inline-block;
border: 1px dotted blue;
height: 1em;
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
white-space: nowrap;
}
From doc
The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box.
text-overflow comes into play only when:
the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)