I need to wrap Japanese characters or make it responsive on sidebar.
Here's my problem:
Below are the Japanese characters:
部門①！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
Already searched some of the questions related here (some are already closed and not solved).
I think you can use word-break CSS property like following example. "break-word" can break the continuous ！！！！ characters.
.side-bar {
word-break: break-word;
}
You can compare the behavior of "break-all" and "break-word" values in following CSS Demo section.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Related
How to force break lines in VuePress markdown files, using default theme? I have tagline like this:
tagline: 'Lorem ipsum'
and I don't know how to split it 2 lines.
I've tried solution mentioned in VuePress tutorial, that is
tagline: 'Lorem⋅⋅
ipsum'
(dots represent spaces) but it was still rendered in single line. I am using VuePress v1.4.0.
The "frontmatter" of a page is in YAML format and not in Markdown.
Since you can add custom CSS to your Vuepress site, you can use the CSS whitespace property to preserve the whitespace from your frontmatter. (Credit to this answer).
To target the element that contains the tagline specifically, you can add this CSS to a file at docs/.vuepress/styles/index.styl:
.home .hero .description {
white-space: pre;
}
You can of course modify the CSS to cater for all of the frontmatter properties with maybe just .home .hero or even just .home.
Then you would be able to use blank lines like you have above in your YAML.
My stakeholders are using CKEditor version 4.10.1 in Drupal (8.6.13).
They have a use case where they are often copying from Google Docs and pasting into the WYSIWYG textarea. Google uses inline css properties. Here's a sample:
<span style="font-size:36pt;font-family:Merriweather;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Your Name</span></p>
They often have to change the sizes of text, and also the font face. In the example above, these are font-size:36pt;font-family:Merriweather; in the style tag.
I am looking at the pasteFilter configuration directive. In the example, they show how to filter certain tags, and tags with certain attributes:
config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';
However, what I want to remove is just certain css styles. For instance, if the paste input is
<span style="font-size:36pt;font-family:Merriweather;vertical-align:baseline;">Hello</span>
then I want the source to read
<span style="vertical-align:baseline;">Hello</span>
I.e. only font-size:36pt;font-family:Merriweather; are removed. (And I want to remove any font-size and font-family specification.)
Is that possible with pasteFilter? If so, how do I express that?
Edit whitelist solutions don't meet our acceptance criteria, because my stakeholders want to preserve other directives, such as bold, italics, etc. We don't want to strip all the styling, or the entire span tag; we only want to remove font-size and font-family.
According to How to Allow Everything Except…, you can use:
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = '*{font*}';
// if you want to be more specific: config.disallowedContent = 'span{font-size,font-family}';
I tested it and it works, see for yourself in this JSFiddle I've created.
Is it possible to add css rule to an element at some page by adblock?
Something like this
#myElement {
color: white !important;
}
I tried to find a script that updates style of this element on page load but it seems that it is not a best way.
It's possible to do it on uBlock Origin and Adguard (as far as I know). Each has its own syntax for the styling rules, but uBlock is capable understanding both.
Here is an example of a CSS rule that changes Twitter background:
twitter.com#$#body.logged-in{ background-color: #8c8787 !important; }
The styling filters should be constructed like this:
<domain> + #$# + <selector> + { <style> }
Just avoid puting a space between the selector and the opening brace. Cause it can give you some trouble. Reference:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#style
https://adguard.com/en/filterrules.html#cosmetic-css-rules
The other answers weren't working for me but there is a way to change an element's style:
example.com##h1:style(background-color: blue !important)
Make sure not to use curly brackets.
There is also some documentation on GitHub.
EDIT: As BeeLabeille mentioned this advice seems specific to uBlock.
I don't think it's possible for AdBlock to change CSS properties, you can use an extension like Stylish (available for Firefox and Chrome) to do just that though.
For AdBlock Plus, you can try this:
##.ytp-pause-overlay, .ytp-scroll-min
##.html5-endscreen, .ytp-player-content, .videowall-endscreen, .ytp-endscreen-paginate, .ytp-show-tiles
##.ytp-endscreen-content
This should disable the display of ads during the pause, and recommended videos, at the end of the video.
PS: Ah.. this is not the subject of the question.. this removes the class from the div element. Well, maybe someone will come in handy, to delete unnecessary blocks in the Youtube player.
There is a previous question that explains how to add a color span to some reStructuredText.
To recap the procedure:
First, you have the role.
.. role:: red
An example of using :red:`interpreted text`
It translates into as follows.
<p>An example of using <span class="red">interpreted text</span></p>
Now, you have the red class, you can use CSS for changing colors.
.red {
color:red;
}
How do you do this if you want text that spans multiple lines? For example:
.. role:: red
:red:`paragraph 1
paragraph 2
paragraph 3`
Where paragraph 1, 2, & 3 would all be "red". If I try to do this I get the warning message:
WARNING: Inline interpreted text or phrase reference start-string without end-string.
It doesn't create the span and inserts ":red:" into the text. It just doesn't interpret this as a string (as the warning suggests).
Basically, can this be done in reStructuredText, and if it can, how?
I'm using Sphinx 1.1.3.
There are a number of ways to do this, but one of them is to use the class directive:
.. class:: red
This is a paragraph.
This is another paragraph.
Most docutils HTML writers will put that into html output as a class html attribute, which you can then style with CSS.
In Sphinx, in particular, however, you may need to use rst-class instead of class in at least some cases. See: https://www.sphinx-doc.org/en/2.0/usage/restructuredtext/basics.html
Also, many block-level elements in RestructuredText take a :class: parameter which does pretty much the same thing.
This is my first post. So:
I'm working on an HTML e-newsletter using the same template I've used for a while now. The template has worked well until recently (the bit of code I have been using is below). Suddenly Outlook 07/10 are not behaving the same way I perceived that they had behaved in the past. They don't appear to be honoring white-space attribute when it comes to hyphens. All other email clients are behaving as I expect (they're honoring white-space attribute).
One of the elements in the newsletter is an ISBN, which is a set of digits separated by hyphens like, "978-1-555-97610-1". The ISBN is in a span tag that is part of a line of text inside a p tag that along with many other p elements, and possibly an img, reside inside a table. I need to prevent ISBNs from breaking on hyphens and wrapping onto new lines.
I can't use non-breaking hyphens, and I have researched this problem a lot in the past (I get a lot of ISBNs in my line of work), so I hope I'm not posting something that's already been answered a billion times.
Any help is deeply appreciated!
Thanks,
Andrew.
CODE:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000000; margin-bottom: 0px; text-align: right;">
Metropolitan Books · 384 pages · $18.00 · paperback ·
<span style="white-space: nowrap;">978-0-8050-9466-4</span>
</p>
How about non-breaking hyphen ‑
Use the <nobr> tag.
E.g. <nobr>978-0-8050-9466-4</nobr>
I needed to have an element not break in an email viewed through Outlook 2013, but not break on spaces. As much as I hate hacking, the way I tackled this issue was to use non-breaking hyphens, but set their color to the background-color of their parents:
<div style="background-color: #fff; color: #000;">
New<span style="color: #fff;">‑</span>Listing
</div>
I have been working on a similar problem except in Outlook 2016 and white space (spaces), and the solution I found that worked for me is using html character.
You might want to try adding width to this, if possible. Then it is not breaking.