I have a div that is being rendered from a data coming from the server.
the data sometimes contains a sequance of chracters without any spacing that can be for example "xxxxxxxxxxxxxx" and "--------------------"
when these sequences are very long my div is rendered in a way that the div overcome the scroll and boundaries and looks bad.
I have tried all solution with word breadk and word wraps and so on. but the issue is that if I fix the ----------------- (with SOH sigh for example) and it is being wrapped up perfectly then the other case is not good as the letter case ("xxxxxxxxxxx....") is cutting it as well as so regular words like current will be also splitted into 2 rows.
I need a solutoion for both IE and chrome
Related
So I'm working with a content editable DIV and I want to implement a smart word breaking feature like you see in most word processors, sites like Medium.com, and in the very box I'm typing this into on Stack Overflow
What I mean by smart word breaking is that if you're in the middle of typing a word and you're about to hit the end of the div then it pushes the whole word down to the next line as opposed to just breaking off the word.
Any leads on how to do this?
Thanks!
What you're referring to is 'word wrapping', where the word is 'wrapped' to the next line. This is done automatically so if you're div is not doing this then you may have a problem somewhere else. The reason this happens is because a div would word wrap normally even if it were not contenteditable so it does this by default. One way it could be disabled from wordwrapping is if you have white-space: nowrap in your CSS (more info at How to turn off word wrapping in HTML?), but this seems unlikely.
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
I'm trying to build a 2 column layout with a consistent vertical rhythm (aligned baselines). The calculations for this are pretty straightforward, and I have them working fine. My question is this:
When two columns of text sit side by side, is it possible to have vertical rhythm maintained (or regained) when the vertical-margins in the columns are not 'whole lines'.
In this example: http://jsfiddle.net/beejamin/PMCXt/ I have an unordered list, where both the list, and the list items have 'half a line' of margin-bottom. When there are an even number of list items, the margins add up to a whole line, and the rhythm is kept (that's good!). When there are an odd number though, the baselines are thrown out, and can't ever join up again (unless I get lucky and another odd-numbered list comes along).
Setting whole-line margins on list items is too much (especially with a long list), and setting no margin is not enough.
Is there any way I can avoid/mitigate this? I won't know the number of lines in advance, and I don't want to use javascript for this (I'm trying to build a generic scheme that I can re-use).
OK, so here's a pure CSS solution. It relies on :nth-child and :last-child selectors, so only browsers that support those selectors will do it. That's good enough for me, seeing as it's really just a nice piece of polish. It would be easy enough to apply for older browsers with some javascript, too.
Here's the working example: http://jsfiddle.net/beejamin/DpSzW/
The key is this selector:
li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}
This adds a full line's margin to the last-child of a list, whenever the last-child is also an odd-numbered child. The full line margin replaces the half-line the item would normally have, and so the vertical rhythm is restored. Basically, it makes any list always take up an whole number of lines.
When a list has an even number of items, the selector does nothing, and everything stays nice.
Not 100% sure, as I didn't test in all conditions, but this seems to work.
Keep the line-height the same.
keep the margins the same as the line-height.
keep the font-size the same.
Example: http://jsfiddle.net/jasongennaro/PMCXt/1/
I am looking for a purely CSS way to center an image within a paragraph of text so the text wraps on both sides of the image.
Ideely the image |-----| would be placed
before or after |-img-| the text within
the code structure|-----| and the text
would wrap around the image.
Found an answer that works quite well available at:
http://www.alistapart.com/articles/crosscolumn/
IE10 Platform Preview supposedly (according to this article) has a new feature called positioned floats that seem to accomplish what you're looking for.
For now, though, I think you're screwed :/
I don't think it's possible:
<p> Text that goes here and image <img src="img.jpg"/> continues text</p>
As far as I know browsers treat <p>content as belonging to a line, thus when the browser parses your p-tag which contains the image it will automatically make that line as high as the image.
Maybe it's possible with css3 though...
There is currently no way to do this. I have looked far and wide.
The other answers here don't address the question as it is asked. This link (A List Apart) requires the use of two paragraphs of text, and you can't do it dynamically because you have to be careful to match up the text on both sides of the image.
The other, IE10's positioned floats (Microsoft calls them exclusions), does sort of work, but with a list of caveats:
It's IE-only.
You have to specify things like the number of columns, rather than an offset.
It doesn't work well when the window is resized. Other content gets overlapped, and the container maintains a minimum size.
I have two span tags that contain content. The first span tag will hold content from the client and the second acts like a "blipping-cursor" (I'm using JavaScript to turn its "display" style from inline to none every 500 milliseconds). Currently, everything works great except for the fact that there is a bit of spacing (just a bit in IE and a TON (one or two spaces worth) in Webkit (nested parenthesis for the win!))) between the content in the first span and the second span.
So my question is simple (well, the question, the answer may or may not be easy), how do I remove this space currently occupying the spot between span one and span two?
Here is a jsFiddle: http://jsfiddle.net/DalexL/6pZB3/
As you can see, there is a highlightable single-space in between the two spans content.
Thanks if you can!
Without seeing any code, I'm going to go out on a limb and say that you have a line break in between the two spans:
<span></span>
<span></span>
That will cause a space sometimes. If you get rid of it, the space should go away:
<span></span><span></span>