How can I enable horizontal scrollbar for my fenced code blocks in jekyll using kramdown and rouge?
Is there any parameter I could add to my _config.yml file maybe? Essentially I want to mimic the code blocks from GitHub as shown below
But this is what I end up having instead
Any ideas?
This is a CSS overflow issue, not a Jekyll issue.
Add the following to your pre element:
pre {
overflow-x: auto;
}
As Brad West said this wasn't a kramdown issue after all. I just had to do the following modifications to my base CSS file
pre {
overflow: auto; /* I added this */
padding: 15px;
margin-bottom: 0;
font-size: 14px;
/* white-space: pre-wrap; I deleted this
word-wrap: break-word; and this
word-break: break-all; and also this */
}
I am currently trying to display the word from ADIDAS SUPERSTAR LIMITED EDITION* to **ADIDAS SUPERSTAR.....** by using CSS. When i tried to use break-word in css but does not work for it. How can i do that?
I think you want to use text-overflow:
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
I simply want to show terminal output on a Webpage. Atm I'm using a pre tag to do that with pre { white-space: pre-wrap; } as you can see upon http://irc.dabase.com/.
My problem is that when I rotate my iPhone6 IOS device, it often doesn't reformat properly. Why is this? Can you offer some good CSS rules to make this use case of showing terminal output on a Webpage better?
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Here are the rules you need explained step by step:
Select all pre elements (set this to pre#yourID or pre.yourClass to select a specific pre)
pre {
Allow pre to wrap at word breaks and line breaks. Unlike pre-line, pre-wrap will not modify your terminal output at all. pre-line will modify your terminal output by condensing whitespace into one whitespace which could make finding exact phrases difficult or mess with whitespace column formatting! See here
white-space: pre-wrap;
Make sure that words that go past the end of the element break off instead of being hidden (like links for examples)
word-wrap: break-word;
This part is optional Justify the text so that it fully fills the line. Spaces become wider but their number is not increased.
text-align: justify;
}
Optionally, this rule can be fit into a media-query so that it only applies in the mobile version. But I believe there is no harm in applying this rule to all screen sizes by simply omitting a media-query.
In the event that the wider version of your iphone makes your pre rule stop working, you should check to see if there isn't already a media-query in place that is applying a rule to the pre when the screen reaches a certain size.
You can also try intentionally creating a media-query for the wider version, which may re-initialize the styles if there is some kind of bug going on.
For example:
Include rule that applies to smallest possible version
Rule A:
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
Then in addition to rule A include another rule to re-initialize styles at landscape orientation
Rule B:
#media all and (orientation:landscape)
pre {
white-space: pre-wrap;
word-wrap: break-word;
text-align: justify;
}
}
You can try this to achieve -
pre {
white-space: pre-line;
word-wrap: break-word;
}
pre {
white-space: pre-line;
word-wrap: break-word;
text-align: justify;
}
You Can Try It Once
This worked nicely for me when I had pre tag inside of a table and code below made pre tag stay responsive to the table column width. Credits to: https://techstacker.com/responsive-pre-tags-css/
pre {
white-space: pre-wrap;
word-break: break-all;
}
I have a html code tag, wrapped in in a pre tag with fixed width and am getting ugly automatic line breaks:
What I want to achieve is, that the text is NOT automatically broken on spaces, but when I add a white-space: nowrap to the code element, the whole thing collapses to a single line, so all \n and \r characters are ignored as well:
Does anyone have an idea how to prevent automatic line breaks, but keep the intended line breaks?
The problem was caused by twitter bootstrap.
For whatever reason, they added the following styles to the code tag:
white-space:pre;
white-space:pre-wrap;
word-break:break-all;
word-wrap:break-word;
By overwriting the styles with:
white-space: pre;
word-break: normal;
word-wrap: normal;
The problem was fixed.
I hope this might help you. Demo
.content pre
{
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
I cannot get word-wrap to work with this example...
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>
I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.
EDIT:
Failed in Chrome 19 and Firefox 12, it works in IE8.
I tried doctype strict and transitional, neither worked.
Mozilla Firefox solution
Add:
display: inline-block;
to the style of your td.
Webkit based browsers (Google Chrome, Safari, ...) solution
Add:
display: inline-block;
word-break: break-word;
to the style of your td.
Note:
Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.
Opera solution
Add:
display: inline-block;
word-break: break-word;
to the style of your td.
The previous paragraph applies to Opera in a similar way.
Word-Break has nothing to do with inline-block.
Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap.
see this codepen
<html>
<head>
</head>
<body>
<style scoped>
.parent {
width: 100vw;
}
p {
border: 1px dashed black;
padding: 1em;
font-size: calc(0.6vw + 0.6em);
direction: ltr;
width: 30vw;
margin:auto;
text-align:justify;
word-break: break-word;
white-space: pre-line;
overflow-wrap: break-word;
-ms-word-break: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
}
</style>
<div class="parent">
<p>
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
the standard.
</p>
</div>
</body>
</html>
Use this code (taken from css-tricks) that will work on all browser
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100px;
white-space: break-spaces;
This combination of properties helped for me:
display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;
to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:
#elm {
word-break:break-word; /* webkit/blink browsers */
word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
#elm {
word-break: break-all; /* in ff- with no break-word we'll settle for break-all */
}
}
This code is also working:
<html>
<head></head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>
</body></html>
word-wrap property work's with display:inline-block:
display: inline-block;
word-wrap: break-word;
width: 100px;
inline-block is of no use in this scenario
SOLUTION
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.
NOTE FOR BETTER UNDERSTANDING:
word-wrap/overflow-wrap is used to break words that overflow their container
word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.
word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias, browsers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).
If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.
Just specify the width of the container to be 100 and then add display: block.
<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}