I'm using TinyMCE and I would like a sort of inline-block behaviour for a custom format.
In other words, I want the selected portion of text to be wrapped in the selected format, regardless of the presence of line breaks.
So here is an exemple of HTML, with [[ ]]delimiting the user selection
<div>
this is [[a text
<br>
with new]] lines
<br>
how amazing !
</div>
If I declare a format like that { inline: "span" } it would result in
<div>
this is <span>a text</span>
<br>
<span>with new</span> lines
<br>
how amazing !
</div>
If i declare the format like that { block: "span" } I'll end up with
<span>
this is a text
<br>
with new lines
<br>
how amazing !
</span>
But, what I want is
<div>
this is <span>a text
<br>
with new</span> lines
<br>
how amazing !
</div>
I tried various of format parameters without success, I tried the global format_empty_lines parameters (that, on the paper, seemed to be the solution) but that didn't work either.
Related
In the below code, I need to hide the 2nd tag and it's related content, how can I do that in Css
<div id="content-list">
<b>Title:</b> some random text <br/>
<b>Title2:</b> some random text 2 <br/>
</div>
With the below css I can only hide the 2nd b tag, but not able to hide the text.
div > b:nth-child(1) {
display: none;
}
Note: HTML mockup can't be modified due to various reason.
There is no way to reference a text node in CSS. However there are probably some hacky ways to accomplish this.
One way you could do this, if the layout supports it, would be to hide the title and anything adjacent to it using a large, negative number for margin-left.
.content-list > b:nth-of-type(2) {
margin-left: -1000000px;
}
<div class="content-list">
<b>Title:</b> some random text <br />
<b>Title 2:</b> some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text some large random text <br />
<b>Title 3:</b> some random text <br />
</div>
As you can see if you run the snippet, there are some issues. Mainly there will just be a blank like in the place where the text was. Plus any one using a text reader will still have access to it.
The only real solution will be either to fix your html or use JavaScript.
"I can only hide the 2nd b tag, but not able to hide the text"
That's because the text "some random text 2" is outside of the tags.
Since you can't actually select text nodes directly, one work-around would be to set the font-size of the parent element to 0. Then reset the font-size for those desired b elements. In doing so, only the b elements should appear, and the adjacent text nodes should effectively be hidden.
div {
font-size: 0px
}
div > b:nth-child(1) {
font-size: 16px
}
<div>
<b>Title:</b> some random text <br/>
</div>
An alternative solution is to change the original HTML to something more like this, which is highly recommended in terms of accessibility:
#content-list div:nth-child(2) {
display: none;
}
<div id="content-list">
<div>
<h2>Title 1</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 2</h2>
<span>some random text</span>
</div>
<div>
<h2>Title 3</h2>
<span>some random text</span>
</div>
</div>
I have a requirement where I have to eliminate <br> tags enclosed in <p> tags whenever they are not preceded with text or followed with text, let me give a complete example.
Asterisk (*) tags are meant to be matched, the others are meant to be left untouched.
<div>
<p>
<br/>*
<span>Text1</span>
<br/>
<i>Text2
</i>
</p>
<p>
<b>
<i>
<br/>*
</i>
</b>
<span>Text3</span>
<br/>
<br/>
Text4
<i>
<br/>*
</i>
</p>
<p>
<span>Text4</span>
<br/>*
</p>
</div>
Putting things simple, I need to normalize the text formatting from some Word documents where the editors were doing line-breaks act like paragraphs, line-breaks are meant to break text and not imply spacing between lines, this is the paragraph's job.
So, all I need is to keep <br/> tags surrounded by text safe and match the rest to issue a delete.
Thanks!
You could use two queries:
//p/descendant-or-self::*/*[1 ]/self::br[not(preceding-sibling::node()/normalize-space()!='')]
//p/descendant-or-self::*/*[last()]/self::br[not(following-sibling::node()/normalize-space()!='')]
I'm adding content to a predefined layout that I cannot modify but allows any HTML. I wish to align a piece of text like a floating text box but due to the h4 and p classes that I can't change it is proving difficult.
What I'd like to see is:
But it currently looks like:
The resulting HTML is currently:
<div class="element property-line"><h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR <div style="line-height: 90%;";>
<i> quite a long but of text that needs to wrap</i></div>
<p></p></div>
...where my content starts at BAR and ends with the i and div end tags.
I think I may be missing a formatting trick.
<div class="element property-line">
<h4 class="property-name">Foo</h4>
<p class="p property-text">
BAR
<span style="line-height: 90%;">
<i> quite a long but of text that needs to wrap</i>
</span>
</p>
</div>
That should be more what you're after, <span> tags are suited for changing/styling text within paragraphs because <div> tags are more for structural elements.
Your original code also had an extra opening <p> on the last line.
I used MS Word to create a document as I wanted it to appear and then tripped out all the extraneous twaddle it puts in; leaving me with:
<p style="margin-left:50pt; text-indent:-50pt">
then found a workaround to mimic the <h4 class= and <p class= sections so that it all fit into one <div> instead.
I am using <span class="class-name"></span> repeatedly in my project. Something like this:
...
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
...
The purpose of the <span>is to have a padding-right so the text after it will be displayed nicer.
The problem is Chrome Browser can not render the empty <span> so it converts it to something like this:
<span class="class-name">
Some text generated here
<span class="class-name">
Some text generated here
<span class="class-name">
</span>
</span>
</span>
Which this will not result in the output I am looking for. Because the paddings will be mixed up.
The interesting thing is if you add a character like between the tags, the first view will be rendered by the browser and the problem is gone.
Could anyone please explain why its working like this?
had some trouble reproducing the bug, but that code seems to produce it
<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>
your code however works perfetly fine for me, are you sure you are as verbose or did you used the xhtml tag closing
<span style="color:green"><span style="color:red"/>
If it's red, it's HTML. Green is XHTML.
</span>
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)