On my website: https://simplebyte.co/ some text has a line through it and when on mobile most of it is striked. It's not a CSS issue since i checked the styling and tried to apply `text-decoration: none;
What I've noticed is that text that has no styling applied in CSS is striked.
It appears as if you have a s tag in your code (line 142):
</div>
<s
</div>
This will render text with a strikethrough.
Related
I transformed the button to send another code to a link with css. how I can put the link at the beginning of the next line with css like pictures below :
From before to after
First you need to customize the UI.
Something like you would want would just be HTMl moving the div to a different location:
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
I am using the bootstrap jumbotron but the header wont wrap in next line when long text is used. any way to fix it?
This is what I am using in my html
<div class="jumbotron">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p class="lead">Help visualize leadership networks in the Upper Midwest</p>
</div>
Try the following on the text that you want to wrap on to the next line.
h1 {
word-wrap:break-word;
}
This will break up the long word at any character though. See the links below for more information.
mdn doc for word-break
css-tricks
in the custom styles inside CKEditor, I have created a "Tip" block element that I want to have span one or more paragraphs. However, when I am editing my text (using the inline editor), I am unable to get the block style to work across multiple paragraphs.
My style looks like this:
CKEDITOR.stylesSet.add('authorStyles', [
// Block-level styles
{
name: 'Yellow Tip',
element: 'p',
styles: {
margin: '1em 0',
padding: '20px 20px 4px',
border: '1px solid',
'border-radius': '15px',
'background-color': '#FFC',
'border-color': '#CC9'
}
}
]);
In the config.js, I added the line to wire-up the custom style
// custom styles
config.stylesSet = 'authorStyles:../authorStyle.js';
And here is my HTML:
<div class="section right" contenteditable="true" id="contentToSubmit">
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
</div>
Unfortunately, when I select two paragraphs to be contained in my div, they both display as their own blocks, instead of both <p> tags being inside my custom <div>.
Paragraphs not displaying properly inside custom block style div
I tried resetting the default enter key behavior (via the enterkey extra plugin), but the only thing I could get to work is setting the enter key behavior to line break (<br/>) which isn't desirable.
I have looked around for help on this particular issue, but can't seem to find an article that deals with this problem. Can anyone help me? We are trying to determine whether ckeditor will be sufficient for our needs, but this is a big blocking issue for our content editors.
The short answer is:
Defined your style as a div style, because you want it to apply to divs not ps, right? So you should have: element: 'div'.
Instead of applying the style through styles combo, what will replace paragraphs with divs, use the "Div" button to open the "Create Div Container" dialog and choose your style in the dialog.
Is the following functionality a bug in Chrome, or is it correct behavior that I don't understand?
In Chrome (version 25), if I have a content editable span which has a node added after it through a :after css class, as in this jsfiddle
http://jsfiddle.net/yQBvn/
if I delete all of the content of the span, after I've deleted the last character, Chrome adds a <br> to the content editable span. This doesn't feel right.
I've verified that Chrome does not do this if the :after css content isn't added, and I've verified that Firefox doesn't do this in any case.
Wanna see something CRAZY?!
http://jsfiddle.net/joeframbach/VXMEN/
<body>
<div id="EDIT-AREA">
<span class='CHARACTER-NAME' contenteditable='true'>Bob</span><span> </span>
</div>
</body>
Adding a span with a space after it fixes the problem. Don't ask me why or how.
Firefox also does this using a DIV with contenteditable
Delete ALL content in the content editable and bam br tag.
Start with an empty CE, focus & hit space, bam br
Solution above of using an empty element directly after a div does nothing, with or without a pseudo element like :after.
Span works though?
Chrome untested.
Hi I have a text widget with one line of text "Connect with me on Facebook" that displays at the bottom of this page http://contemporaryinteriordesigns.com.au/. It displays on 1 line for every browser except for IE8.
Does anyone know why IE8 is creating a line break and how I could fix it?
Thanks, Dan
I think IE8 is acting weird because you're styling the text in the div selector. Try wrapping that text into a tag:
<div class="textwidget">
<a><img/></a>
<p>Connect with me on Facebook</p> <!-- Wrap it in a paragraph -->
</div>
The <div> tag defines a division or a section in an HTML document. and The <p> tag defines a paragraph. Wrapping the text in <p> is more semantically correct. Then style the <p> till you get it right. Since I can't edit the code and I'm testing with IETester I can't try it out.