I have this html:
<div id="d0">
<div id="d1">Hello</div>
<div id="d2">some text here that could wrap but is not being wrapped</div>
</div>
and this css:
#d0 {
white-space: nowrap;
}
#d0 > * {
white-space: normal;
display:inline-block;
}
#d1 {
width:300px;
background-color: #ff0;
}
#d2 {
background-color: #aaf;
}
Fiddle: http://jsfiddle.net/yH8sC/1/
If I resize the window (or result area) so that the whole thing does not fit on one line, I would expect d2 to wrap. However, it is behaving as if d1 did not exist - d2 only wraps when there is not enough space to display d2 alone on one line. I tested with Chromium and Firefox.
Why is this happening and how can I change the behavior?
Note: I'm using nowrap on d0 because I don't want d2 to be pushed below d1. But I would still like the contents to wrap when it can.
If I understand what you're trying to accomplish, try applying float:left to #d1. it converts it to an inline element. The element after it (#d2) will fill up any space left over by #d1. In this case, since it's a fluid element, the text will wrap. http://jsfiddle.net/K2XRe/
#d0 {}
#d1 {
width:300px;
background-color: #ff0;
float: left;
}
#d2 {
background-color: #aaf;
}
One solution I found is to use display: table-cell instead of display: inline-block
It's probably not as widely supported, but it should still work in the majority of browsers nowadays. The alternative would be to use actual tables :)
Related
I wanted to ellipse a latin text from lefthand side (It represents a path). Something like the following figure:
To making this I found the following css:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
}
.red {
color: red;
}
and I use it like this:
<div class="ellipsis-left">
/Pollution/<span style="red">Air Pollution/</span>
</div>
But the problem is that slashes which separate parts of the path are not placed in the right position. In the following figure, the red slash must be shown at the end of the path. Is there any solution to solve this problem?
I want to reach something like this:
At the moment, as a solution I color the first slash with red as it places at the end of the string! Something like this:
<div class="ellipsis-left">
<span style="red">/</span>Pollution/<span style="red">Air Pollution</span>/
</div>
But this is not a good solution!
I had a similar problem and worked around it by stripping of the leading slashes in my paths. Slashes in the middle don't seem to be an issue.
Bit of a tricky situation you got there. The / aren’t normal letters, but rather fall under punctuation - and so they get treated differently by the LTR algorithm.
Tried different things - making the spans rtl again did not work, inserting the / as pseudo elements and trying to format them differently didn’t get me anywhere, and making the spans inline-block breaks the whole LTR thing of the parent …
Only thing I could come up with that seems to work, is to position those / absolutely. So they need wrapping into an element of their own, and the first path segment also needs to be wrapped in a span. You might wand to fiddle with the padding a bit, to get the spacing exactly right.
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
But wait, you want a leading slash in front of the whole thing as well … and that’s where it breaks again. Trying to add that into the “Pollution” span as well, I had it end up at the very end again, and putting it into its own “empty” path segment (<span><span>/</span></span>) did not work either. It does work, if that element contains an actual letter - but then I am having trouble “hiding” that again (plus, semantically really ugly) - wrapping the latter into another additional element, so that I could apply inline-block and a zero width to hide it, broke the whole thing again.
Using visibility to hide that extra letter worked, and a bit of negative margin helps hide the offset that leaves:
.ellipsis-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
/* Beginning of string */
direction: rtl;
text-align: left;
color: blue;
width:9em;
}
.ellipsis-left:nth-child(2) {
width: auto;
}
.ellipsis-left > span {
direction: ltr;
position: relative;
padding-right: .375em;
}
.ellipsis-left > span span {
position:absolute;
right: 0;
}
.ellipsis-left > span:first-child {
visibility:hidden;
margin-left: -.5em;
}
.ellipsis-left > span:first-child span {
visibility:visible;
}
.red {
color: red;
}
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
<div class="ellipsis-left">
<span>X<span>/</span></span><span>Pollution<span>/</span></span><span class="red">Air Pollution<span>/</span></span>
</div>
As I said, semantically rather ugly … but the best I managed to come up with so far.
Maybe someone can think of an alternative approach that works, something with flexbox and its order property or something.
I want to place inline-block element right after inline element in case of need to handle very long string that has ellipsis at the end.
Example is the next:
.container {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
.inline-text {
display: inline;
}
.inline-red-icon {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
<div class="container">
<div class="inline-text">
Onelongstringonelongstringonelongstringonelongstringonelongstringonelongstring
</div>
<div class="inline-red-icon">
</div>
</div>
It provides well-rendered results for regular-length strings in case of single-line and multi-line:
But for very long strings the inline-block will be moved on the next line:
Here is the jsfiddle: https://jsfiddle.net/xrkpspfr/4/
I am trying to put this inline-block after last character, so it should be placed after ellipsis in the case with very long strings. But at this time I can think of only JS-based solution that should calculate the position of last character and make some manipulations with position of inline-block element. It will be even worse if you need some responsive behaviour.
Is there HTML+CSS way to put described red inline-block element after ellipsis without line-break before it?
UPDATE: There is a solution only for the case when you don't need support multi-line strings (thanks to #wadber): using white-space:nowrap; and inline-block in both cases - text block and red square.
See the answer below: https://stackoverflow.com/a/39409698/2474379
Try to add this css rule to the .container:
white-space: nowrap;
Here the updated JSFiddle from vivekkupadhyay
I currently have an ordered list like this one where the numbers and items are centered and left aligned:
I achieved this using this css:
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
The problem I am seeing is that it wraps text strangely - it will wrap list items (create a new line) if they are a certain amount longer than the other list items. This creates things like in the picture above (or in text format):
1.Sleeping
Bags
2.Tent
3.Food
4.Stove
5.Jackets
6.Bug Spray
Notice how the Bags is on a new line, but that is not where the div ends. I tried using white-space: nowrap, but obviously that does what it says and long text then continues beyond the div without breaking.
Also, it may just be some sort of browser glitch because sometimes when I hit back and the page is cached it will load correctly, and in safari instead of chrome it seems to work correctly without white-space: nowrap.
Any help / ideas appreciated, or if it is just some weird unfixable thing, I am sorry
You can try Below code:
working demo
div{text-align:center;}
ol
{
padding-left:1em;
padding-right:1em;
display: inline-block;
text-align: left;
word-break: break-word !important;
/*white-space: nowrap*/
}
Give the list a (bigger) width:
ol {
width: 200px;
... rest of CSS
}
As for debugging, I often add a border: 1px solid red; so you can see how far the element extends. If you add it to the ol you'll see that it's width causes the line break. So making it bigger should do the trick.
I have a div that I want to behave like an text input field.
Here's the full source code example:
HTML:
<div contenteditable='true'></div>
CSS:
div:empty:before {
content: 'Type here...';
color: #ccc;
}
div{
padding: 4px;
border: 1px solid #ccc;
}
See the fiddle in IE9.
In IE9, the problem is that the keyboard caret is displayed at the end.
In Chrome, the caret is at the beginning, which is correct.
It seems like the problem is that the pseudo :before element is taking up space in IE9. How can I make it take up no space like it does it Chrome (behave like a placeholder)?
To make it work in IE:
div:empty:before {
content: 'Type here...';
color: #ccc;
display: inline-block;
width: 0;
white-space: nowrap;
}
display: inline-block makes it possible to set a width.
width: 0 makes sure that the element does not take up space.
white-space: nowrap forces the text to be in one line (would break lines otherwise because of the limited space)
updated fiddle
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)