I have some generated reStructuredText that has code blocks with long lines. Is there a way to enforce line breaks just like normal lines (not in blocks) are wrapped?
Here's an example where rst2pdf reduces the font size of the block to make the whole line fit on the pdf page:
.. code-block::
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
I don't think rst2pdf has a way to break those lines - because it's a code block, it won't adjust anything. You could try applying a different (non-literal) style instead, and setting that up to do what you wanted.
Related
I have a huge sentence as below:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.
I want to break this huge sentence at every 6th word. so it should look as below:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud ullamco laboris nisi ut aliquip
ex ea commodo consequat.
I tried the following css rules:
word-break: break-all;
No impact. Next I tried:
overflow: visible;
width: 0px;
This is breaking every word to be in a line. any help on how i can word-break at 6th word?
As the other answer mentioned, CSS has no way of adding line breaks.
However, there's a lesser known unit in CSS: ch. Depending on the font you use, you might be able to roughly achieve what you want:
div {
width: 32.5ch;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
If that doesn't work for your use case, a more reliable solution would be to manually add line breaks in your text and then use white-space: pre-wrap to display them, as described in this answer.
You'll probably want to use your second solution, but set the width to be wide enough for roughly 6 words.
overflow: visible;
width: 100px; /* 6 word width */
There's no way to break on 6 words in CSS, the alternative is adding <br /> after every 6th word in JS or some pre-processor.
I know you've mentioned you want it in CSS. But if JS is allowed then its easy without any guesses for width. So this will work even if the world length is big.
See the Snippet below:
var text = document.getElementById("text").innerText;
text = text.match(/(\S+ ){1,6}/g).join("<br>");
// You can change the number 6 to whatever you want.
document.getElementById("text").innerHTML = text;
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
What I am looking to do is have an accordion where the top panel of the accordion is a link to another page, and the rest of the accordion functions normally. I've tried some javascript to stop the accordion event, but that does not seem to work. Any pointers?
Yeah looks like first you'd need to delete the interior content so that it doesn't expand. After that, I'd add a class the a tag and write some script on the page to recognize the class and redirect the url. Something like the below:
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="redirect-me" href="http://www.google.com">Accordion 1</a>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
Script would look something like this with jQuery:
$(".redirect-me").bind("click",function(){
theUrl = $(this).attr("href");
window.location = theUrl;
});
Kind of a dirty way to do it. But it's a bandaid till you can do the recommended way someone else figures out.
I'm trying to work out how I target the final element within a dynamically generated content set.
For example, all the generated content get spits out like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
In this case I'd like the final paragraph to have a margin-bottom: 0;
But the content could also be generated like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
Where by I'd like the final paragraph within the inner-box div to be given the zero margin.
I've tried adding block-inner:lastchild {margin-bottom:0;} but that doesn't work correctly. Just wondering how the best way to target this. Cheers!
There isn't any robust way to do this. .box > p:last-child will only get you a p element that is a child of .box; it won't match anything in your second example because the last child of .box is .inner-box, not a p.
.box p:last-child is not reliable because it will match all p elements that are the last children of their parents, which means it will match the last child of .inner-box here even though it's not the last p in the entire .box:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
And you have to worry about all the other possible ways the last p element could be nested somehow.
But if you know that the last p element can only ever either be a child of .box, or be a child of the last .inner-box for example, then you can enumerate those two possibilities:
.box > p:last-child,
.box > .inner-box:last-child > p:last-child
If you don't know the class name of that intermediate element you might be able to get away with not qualifying that :last-child at all:
.box > p:last-child,
.box > :last-child > p:last-child
And even then, that does not account for the fact that the last p may not even appear in the last child of .box.
Basically, you need to write a selector accounting for each and every possible nested structure in which the last p element may appear; there is no easy way to say "match the last p descendant of this container in a dynamic structure."
Use p:last-child
This will select the last <p> tag and only apply the styles to it.
.box {
border: solid 1px
}
.box p:last-child {
margin-bottom: 0;
color: red;
}
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
Can someone explain it for me in simple words please?
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line boxes.
Whats the meaning of the first paragraph?
What is the outer height? Is it margin?
It is from: CSS spec 2.1 > visual formatting model > section 9.5 Floats
What's the meaning of the first paragraph?
It's really just a precise definition of when a line of text is considered as being "next" to a float, basically when there is vertical overlap between them. When a line of text is considered to be next to a float, the line of text is shortened to avoid the float.
What is the outer height? Is it margin?
Yes, it's the distance from the upper edge of the top margin to the lower edge of the bottom margin. The important thing to remember in this context is that margins can be negative. So the lower edge of the bottom margin can be above the upper edge of the top margin, in which case the height is negative.
See below or http://jsfiddle.net/n0fobpqr/2/ for examples of how adjusting the bottom margin (and hence the outer height) affects the width of the lines of text.
body { font-size:20px; width: 300px; }
figure { float:left; }
img { padding-right: 10px; }
.one figure { margin:0; }
.two figure { margin:0 0 -60px 0; }
.three figure { margin:0 0 -110px 0; }
<div class="case one">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case two">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case three">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
It means floats collapse to the next visible line. You can think of "lines" as boxes that may span across the entire width of the browser window. Floats have no impact on the height of these lines. The outer height is the entire height of the float which includes margins and borders.
I have an <h2> title that introduce an <ol> list as follow:
<h2>A title</h2>
<ol>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
</ol>
This pattern (title+list) is repeated a number of times and I have issues when printing because the title is sometimes separated from it's following list.
As an illustration of the problem: this jsfiddle demo gets printed as follows:
[...]
3. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...
Some title
================================================================================
1. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...
[...]
I've unsuccessfully tried to avoid page breaks after <h2> and before <ol>:
h2 {
page-break-after: avoid;
}
ol {
page-break-before: avoid;
}
I solved this by defining a CSS class called "page-break" which has the rule page-break-before: always !important and I applied it to the <h2> where the screwed up page break was occurring.
<h2 class="page-break">Some title</h2>
<style>
#media print {
p.padding {
margin-bottom: 9cm;
}
ol li {
page-break-inside: avoid;
}
h2 {
page-break-after: avoid;
}
ol {
page-break-before: avoid;
}
.page-break {
page-break-before: always !important;
}
}
</style>
Now it looks like this:
This might be able to be combined with the CSS :nth-of-type selector if you're looking to force a page break every three or four <h2>s .
Here's a JSFiddle.