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.
Related
I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.
I'm currently defining the following style rules:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( File | Print | PDF | Open PDF in Preview) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.
So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?
Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in this previous answer, would it help if I construct my table from divs instead of tds when aiming for print output?
UPDATE
Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
If I try to print this table (e.g. by applying This Frame | Print Frame ... | PDF | Open PDF in Preview to JSFiddle's Result view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.
You absolutely need to move away from a table if you need readable vertical printing on the page. Tables are great for display on the page when it's tabular data but are not a viable solution for printing as they don't respect flow.
There are plugins (like this one here, no affiliation – just a Google result) that will do this automatically for you, but here's the example. When you use this, make sure that the #media print is listed appropriately. To test locally, you can change that to #media screen.
That won't show the #page rules listed, but those are visible via a print preview.
Hope this helps:
Fiddle for printing in portrait
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
#media print {
#page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Edit - Printing horizontally across several pages:
Okay, so this is probably a far less common use case, and we have to do some goofy things with it – so fair warning. I'll try to explain this step-by-step as it's cryptic and obnoxious.
Fiddle for printing in landscape here!
CSS
#media print {
#page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
This is the part that matters, as it's setting your print directives. Most of this is stuff we've seen in the original (with some tweaks as I was playing with it).
The part we care about comes here:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
What we're doing is flopping the whole thing on its side, and then sliding it to where we expect it to be. translate(8.5in, -100%) is telling the browser – Slide this element 8.5 inches (the width of a standard letter paper in the US) to the right, and then slide it up 100% of its height (the negative indicates up as opposed to down). We slide it to the right 8.5 inches so that it'll appear at the top of the page when rotated. We slide it up its calculated height so that we don't have an ugly gap to the left of the table when the rotation happens either.
Then, we instruct it that we want all of those calculations run in relation to the bottom left of the element's normal position in document flow. This keeps this crazy long table from being rotated way off to the right by setting the left property. The bottom property is important because we're rotating it clockwise a quarter turn, and if we did that from the top, it would be off the page to the left. That quarter turn is described in the next part of the transform statement: rotate(90deg);
Voila. The thing prints across multiple pages.
Before you ask: No. There is no way to prevent the page break inside the element of which I'm aware. I know it's obnoxious, ugly and all that garbage, but we can only work with the tools which we're given.
Update Firefox confirmed working:
page-break-inside: auto; is the default style, so unless you have a rule setting them differently, those rules will do nothing.
If your table isn't being broken onto multiple pages, then it's most likely because there some other rule you added, which prevents it - my guess an overflow: hidden.
What you first should do is remove all styles, and see if that prints on multiple pages. If yes, start adding your styles back (rule by rule, or if necessary line by line) to find the problem.
If you want to force page break you should use page-break-before or page-break-after. You need to know that the styled element should contain a non-empty block-level element and that it can't be absolutely positioned. However it is quite inconsistent on tables elements. Which leads us to your last question : yes, it would be more consistent to build your tables with divs.
However, considering what you want to achieve (printing large horizontal tables) you should know that trying to fit 3 pages into 1 can't work as your content won't be readable. As a matter of fact, the only best practice would be to use a vertical layout instead (just for print or for both web and print).
Hi! When the window is resized, the text automatically wraps to fit its container nicely. For this, I'm using this CSS code:
article {
overflow: auto;
word-wrap: break-word;
}
Though it seems, that this has no effect at all. When I remove this piece of code, the behavior doesn't change: the text is still wrapped near the end of the line.
I'm complaining about the huge gaps between words. I've observed a few webpages where no extra code is used for this and it still works nicely. Can you please help me get rid of the space? Thank you!
I agree that the text-align: justify has been inherited from the parent html tags.
You could also try modifying the CSS as follows:
article {
overflow: auto;
word-wrap: break-word;
text-align: start;
}
As mentioned in the comments article seems to be inheriting text-align: justify;. Here's a way to fix the alignment:
http://jsfiddle.net/awesome/zs394/2/
article, .unjust {
/* regular */
text-align: left;
/* super strength */
text-align: left !important;
}
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 :)
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu">
<h3>Destinations in Europe</h3>
<ul>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
<li>dfgdgdgfgdg</li>
</ul>
<h3>Features</h3>
<div>
<img src="/assets/images/o/menu/city-feat-one.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
</p>
</div>
<div>
<img src="/assets/images/o/menu/city-feat-two.jpg" />
<h4>blahblah</h4>
<p>
khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
</p>
</div>
</div>
My CSS:
#rb-menu-com li .submenu > div {
width:48%;
float:left;
position: relative;
}
#rb-menu-com li .submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
}
#rb-menu-com li .submenu div img {
border:1px solid #fff;
}
Has anyone experienced this before? I haven't!! Driving me mad!
Give this style to the <p> tag.
p {
word-break: break-all;
white-space: normal;
}
Word wrapping only occurs when there is a word break.
If you have a "word" that is as long as that, then there is no place for it to break.
The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).
Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.
p { word-break: break-all }
(Note browser support).
Alternatively, you can use overflow to truncate the text if it won't fit in the container.
To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.
That is because you have continuous text, means single long word without space. To break it add word-break: break-all;
.submenu div p {
color:#fff;
margin: 0;
padding:0;
width:100%;
position: relative;
word-break: break-all;
background:red;
}
DEMO
This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:
The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie.
:%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.
This is a little late for this question but others might benefit.
I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.
.p
{
white-space: normal;
overflow-wrap: break-word;
width: 96vw;
}
You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.
word-wrap: break-word;
this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.
JSFiddle
The solutions is in fact
p{
white-space:normal;
}
You can change the break behaviors by modifying, word-break property
p{
word-break: break-all; // will break at end of line
}
break-all: Will break the string at the very end, breaking at the last word
word-break: is more of pretty brake, will break nicely for example at ? point
normal: same as word-break
If the desired result is to break the line by complete word use:
p { word-break: break-word; }
else you can use:
p { word-break: break-all; }
EASY
p{
word-wrap: break-word;
}
Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.
For others that find themselves here, the css I was looking for was
overflow-wrap: break-word;
Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.
overflow-wrap demo
add float: left property to the image.
#rb-menu-com li .submenu div img {
border:1px solid #fff;
float:left;
}