browser would be mozilla firefox 5
if the text is:
text is too longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
I would like it to be wrapped:
text is too longggggggggggggg
ggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggg
You could try using the CSS style word-wrap: break-word
Put it in a multiline TextBox.
Actually you need to specify the width of your label. In my case I put it inside the and add this css class: display: inline-block; width:123px;word-break:break-all;
Related
I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?
I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.
the style dropdown menus in ck_editor in TYPO3 8.7 shows the labels in the same font size as in the editied text. E. G. when h1 is in the rte.css formatted as 30 px the text in the dropdown is 30px too and therefore the entry is not readable. Is there a possibilty to fix the font size in the dropdown menus to 12-15px, always and in every context? Without destroying the wysiwyg in the editable text?
Thanks
As far as I can see you can do that by using in your rte.css something like:
.cke_panel_listItem h1{
font-size:15px;
}
h1{
font-size:60px;
}
h2{
font-size:40px;
}
h3{
font-size:20px;
}
Please note that as the dropdown is loaded inside an iframe, you might have to kill your browser's cache to see some change.
See also CKEditor remove style preview from Styles dropdown
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.
I wanted to make a custom select in HTML with CSS only. So I did the trick with the around the select in order to have a custom arrow (View here).
I want to set the text-overflow of the select to 'ellipsis'. But now long options overlap my custom-arrow. Is there a way to limit the max. text-width of a select, so that the ellipsis would be before my custom arrow?
PS: I am using Firefox and I only want to use CSS for this. So please no solutions in JS.
Thanks in advance
This should help:
.truncate {
max-width: TRUNCATION-BOUNDARY;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Fiddle
So in your case just set max-width to something like 90% (or even less), so it doesn't overlap you arrow anymore.
I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!