I have some data which needs to be formatted and I want to format it by using only css no javascript nothing.
So the question is I have this sample string:
Home - Office
Expected Output:
I want to format these words using css without inserting any div. Like the code can be in this way:
someData.push(`${origin.code} - ${destination.code}`); // code coming from the store file
<div>{value}</div> //prints the above code value here and this is from the js file
and the output will be like the above mention in the blockquote. But again I have some random list getting generated via push code. I don't want to use the div here. Is there a way by using css we can space them? Also I want to hide the " - " hyphen symbol. I have used word spacing but then again it's hardcode and also creates problem when resizing the window the last text stays at the original position it doesn't resize.
Any help will be appreciated.
text-align: justify-all; (MDN) would probably solve your problem with justification but it's unsupported.
AFAIK you need ONE child element, at least for hiding that dash and then you can use it for justifying those 2 words too.
➡️ Codepen
body {
max-width: 30rem;
}
p {
display: flex;
justify-content: space-between;
padding: 1rem 0;
outline: 1px dotted darkred;
}
.case2 > span:first-child {
display: none;
}
.case3 > span:first-child {
visibility: hidden;
}
<!-- node texts can be justified but you need some flex items too -->
<p>Home - <span>Office</span></p>
<!-- the 1st span can be hidden -->
<p class="case2">Home <span>-</span> <span>Office</span></p>
<!-- the dash-span can be both hidden and make node texts be justified -->
<p class="case3">Home <span>-</span> Office</p>
Related
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
I wish to use CSS background shading to annotate some text in HTML.
But, the regions may overlap each other.
In this example I wish to shade the background of "Jim, Alex, Dunedin" in yellow, then "Dunedin, 184.3" in blue. In this instance, the "Dunedin" element would therefore be shaded in green.
I'm pretty sure this isn't possible in HTML, since I don't think span elements can overlap.
Any other solutions to this problem offered?
Can it be done? Yes.
Should it be done? Maybe not the way I've shown it. It's just to get you started.
span:first-of-type {
background-color: yellow;
}
span:last-of-type {
background-color: lightblue;
display: inline-block; /* needed so that the next line will work as we cannot transform inline elements */
transform: translateX(-59px); /* move this element 59 pixels to the left so that it overlaps */
mix-blend-mode: multiply; /* blend the backgrounds together */
}
<span>Jim, Alex, Dunedin</span>
<span>Dunedin, 184.3</span>
Maybe it would make more sense to process this HTML so that the markup is changed to look something like the following:
.yellow {
background-color: yellow;
}
.blue {
background-color: lightblue;
}
.yellow.blue {
background-color: lightgreen;
}
<span class="yellow">Jim, Alex</span><span class="yellow blue">Dunedin</span><span class="blue">, 184.3</span>
<!-- note, newlines above would result in whitespace separating the background colors between the <span>'s -->
You can can accomplish most of what you're setting out to do via relative/absolute positioning, z-indexing, and setting opacity on these elements to anything under 1.
For example:
<h1>Image Transparency</h1>
<span style='opacity:.3;background:yellow; position:absolute;width:100px; height: 1em;'> </span>
<span style='opacity:.3;background:#98fffc; position:absolute;width:100px; height: 1em; left: 50px;'> </span>
<p>The opacity property specifies the transparency of an element. The lower the
value, the more transparent:</p>
Good luck!
Note: in the end I solved the problem by analysing the data & producing a different span for each differently shaded block.
So effectively, my code produced:
<span class='yellow'>Jim, Alex, </span><span class='yellow-blue'>Dunedin, </span><span class='blue'> 184.3</span>
It did this by creating an array of arrays, with a cell for every character in the text. As the text was analysed, for each character it would add "styles for that character" in the array for that cell. Then the code went through and assigned a span for each consecutive set of cells that shared the same styles.
The Python code to do this is here, and here is an example of the highlighted output, though in this example there are no overlapping regions.
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).
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.