For example, I got a title:
"Lorem Ipsum for WordPress"
It will be display like this in my screen:
Lorem Ipsum for
WordPress
But I want to display like this:
Lorem Ipsum
for WordPress
Can I have any solution in CSS? I dont want to use <br>
Thank you.
If you just want to prevent a line break between two words, as in “for WordPress”, then the simplest way is to use a no−break space (U+00A0) instead of a normal space. If you do not know how to type no−break space in your authoring environment, use the entity, as in for WordPress.
Alternatively, wrap the words inside nobr markup, as in <nobr>for WordPress</nobr>, or inside a span element to which the CSS declaration white-space: nowrap has been assigned.
Set width whatever you want.
<p>"Lorem Ipsum for WordPress"</p>
p {
width: 95px;
}
or you can use two different para
<p>"Lorem Ipsum </p><p>for WordPress"</p>
DEMO: FIDDLE
<p><span style="display:block">Lorem Ipsum</span>for Wordpress</p>
May not possible by just using CSS but you can do using span + a CSS Display as block as shown below
<p><span>Lorem Ipsum</span><span>for WordPress</span></p>
CSS:
p span
{
display: block;
}
Thanks
you can also use white-space:pre-line DEMO
Related
Is there a way to force a part of a text to display on a new line with CSS?
So when the HTML looks like this:
<p>Hello, my name is John.</p>
The result will be:
Hello,
my name is John.
The HTML is generated dynamically, so I cannot change it.
p::before {
float: right;
width: calc(100% - 3.6em);
height: 1em;
content: '';
}
<p>Hello, my name is John.</p>
Please note that this is rather fidgety: the 3.6em is somewhere in between the width of "Hello," and the width of "Hello, my". So this depends on the font as well as the word(s) you need it to break after. I had to experiment a bit with different fonts to find a good average size.
The short answer is, you cannot split a text without writing code in between your texts.
Follow this link which provides a good solution.
How to give line-break from css, without using <br />?
But this does not even consider where to split the lines automatically. If you want something more automated, you need to use php or javascript.
Here is an example from another link:
SPLIT HTML INTO different lines
Check and let me know if it helps you.
Thanks
S
There are many ways how to do it.
First is using the <br> element of HTML
<p>Hello,<br> my name is John.</p>
Second is to put both of it in <p> tag
<p>Hello,</p>
<p>my name is John.</p>
Third is by putting both of it in <p> tag with css attribute and value clear:both - this is to make sure that no element will be floated in left or right
Try the codes below and hope it helps you.
p {
clear: both;
}
<p>Hello,</p>
<p>my name is John.</p>
All of it will output
Hello,
my name is John.
<p>Hello, <br>my name is John.</p>
or just put another <p></p> tags
<p>Hello, </p> <p>my name is John.</p>
Hi i am new to CSS and i might be asking some school boy questions. I want to but a line break at the top of my post before and after my h1 tags. I might be trying to do this by the wrong method. Maybe i need some padding at the top but defiantly need a line break after each H1.
This is my css for posts
#kopa-post-content p,h1,h2,h3,h4 {text-align:left;margin-right:20px;margin-left:20px}
Example of what i am trying to do.
Any help will be gratefully received
Thanks
Danny
A h1 tag is a block element. It already has a "line break" before and after it. If you wish to increase the space above and below the element, use margin.
eg.
h1 {
margin-top: 10px;
margin-bottom: 10px;
}
You should not use <br> for styling. You should use CSS, and you'll have a lot more control, too.
What you're talking about is referring to HTML not CSS. You can use the tag in HTML to accomplish this.
<body>
some text
<br>
<h1>Some Title</h1>
<br>
some more text
</body>
I am experiencing a problem that never happened before and seems really unprecedented, some text is not wrapping inside a div.
In this link is a sample of my html code:
http://jsfiddle.net/NDND2/2/
<div id="calendar_container">
<div id="events_container">
<div class="event_block">
<div class="title">
lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
</div>
</div>
</div>
</div>
Any help??
I found this helped where my words were breaking part way through the word in a WooThemes Testimonial plugin.
.testimonials-text {
white-space: normal;
}
play with it here http://nortronics.com.au/recomendations/
<blockquote class="testimonials-text" itemprop="reviewBody">
<a href="http://www.jacobs.com/" class="avatar-link">
<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">
</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
That's because there are no spaces in that long string so it has to break out of its container. Add word-break:break-all; to your .title rules to force a break.
#calendar_container > #events_container > .event_block > .title {
width:400px;
font-size:12px;
word-break:break-all;
}
jsFiddle example
The problem in the jsfiddle is that your dummy text is all one word. If you use your lorem ipsum given in the question, then the text wraps fine.
If you want large words to be broken mid-word and wrap around, add this to your .title css:
word-wrap: break-word;
This may help a small percentage of people still scratching their heads. Text copied from clipboard into VSCode may have an invisible hard space character preventing wrapping. Check it with HTML inspector
you can add this line: word-break:break-all; to your CSS-code
Might benefit you to be aware of another option, word-wrap: break-word;
The difference here is that words that can completely fit on 1 line will do that, vs. being forced to break simply because there is no more real estate on the line the word starts on.
See the fiddle for an illustration http://jsfiddle.net/Jqkcp/
To prevent wrapping of a part of text, surrounding that part in a <span style="white-space: nowrap;"> can be used.
Given a block of justified text (text-align: justify), how do I cancel justification for a part of the text? I want to keep the whole text justified, but not allow to increase distance between two specific words.
Instead of even spacing in the second line like this:
Lorem ipsum dolor sit amet, consectetur |
adipiscing elit. Phasellus et |
ullamcorperenim sed velit fermentum. |
I want to keep the words "adipiscing elit" together, like this:
Lorem ipsum dolor sit amet, consectetur |
adipiscing elit. Phasellus et |
ullamcorperenim sed velit fermentum. |
Is this possible?
Options:
Use FOUR-PER-EM SPACE U+2005 instead of normal space, e.g. adipiscing elit. There is no guarantee that browsers treat it as non-stretchable space, but that’s what they actually do, and it’s a rather natural thing to do. After all, it is one of the fixed-width spaces. Drawback: typically fails on IE 6 (a small box is shown instead of a space), if the primary font of the text is not Arial Unicode MS or some other especially “rich” font.
Wrap the words inside some inline markup (typically span) and set text-justify: none and display: inline-block for it. Drawbacks: does not work old some old browsers, and forces the two words together (due to the latter declaration—and without it, this methods does not work on current browsers).
Use NO-BREAK SPACE instead of normal space. This used to work well, though with the drawback to forcing the two words together on the same line. But e.g. current Firefox treats no-break as stretchable, sadly enough.
Use a technique like the one in Web_Designer’s updated answer. I would suggest making the width em valued, to make it relate to the font size. The typical width of a space is 0.25em.
I wouldn't recommend using the html style attribute. If you use a class, then it's easier to make changes:
Wrap the two words "adipiscing elit." in a span with a class like this:
<span class="unjustify">adipiscing elit.</span>
And then in your CSS:
.unjustify {
word-spacing: 2px; //experiment with differen't values here.
}
Update:
After some testing the above solution doesn't seem to work. ...so I came up with the following (working) solution:
Wrap the space between your two words in a span with a class like this:
adipiscing<span class="unjustify"> </span>elit.
And then in your CSS:
.unjustify {
display: inline-block;
width: 6px;
}
One solution you should look into is to use one of several fixed-width Unicode space characters. See:
https://jkorpela.fi/chars/spaces.html
or
http://en.wikipedia.org/wiki/Space_(punctuation)
Example:
adipiscing elit.
However like Web_Designer's solution these will leave a space at the end of the line, if the line breaks there.
I'm looking for a solution to a rats nest of code I was handed - it's massive in volume, so I'm looking for suggestions to a programmatic approach to commenting what div closes where.
Example:
BEFORE
<div id="wrapper-item">
<div id="outer-item">
<div class="inner-item">
<h1>Just Some Placekeeper Copy</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
</div>
</div>
</div>
AFTER
<div id="wrapper-item">
<div id="outer-item">
<div class="inner-item">
<h1>Just Some Placekeeper Copy</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
</div><!-- .inner-item -->
</div><!-- #outer-item -->
</div><!-- #wrapper-item -->
I tried a few Regex attempts with no joy, I'd be curious of what the best approach is..
If it is valid xhtml, then you could just put it in an XML Document and then proceed to process the div tags by finding all of them, then adding a sibling that has the comment node that you want.
A solitary regular expression might work, but it might be better to write a program that is enhanced by regular expressions. Get the text between < div id=" and >, then add that in a list or stack, and link it, in order, with an int index. Continue scanning it and upon finding a '' tag, pop the newest text on the stack, and format it to become a comment.
I just use a script to properly indent the HTML so I can check at a glance if all tags are closed properly -- the indenting correctly comes back to touch the left margin. To check what opening matches what closing I use a folding text editor like SciTe or Komodo Edit so I can browse the properly indented code by opening and collapsing sections.
If anybody is interested in the indenting script (written in tcl) I can upload it somewhere. Alternatively you can try using something like HTMLTidy to do the formatting.
You can use a XML/DOM API for a particular language and play with how it handles Comment Objects.
For example, Python -- http://docs.python.org/library/xml.dom.html#comment-objects
<div>whatever</div>
<!-- this comment is already deprecated -->
Just use a decent editor that highlights the start/end tag. Even NotePad2 does this. Most editors can also select tag and contents, or just contents. Many editors will also reformat the html for you (if you dare).
Commenting the end of the tag is going to get out of sync and be even harder to follow for you or your coworkers.
If you do end up successfully adding redundant comments to every div, span, p, ul, etc tag, I think you'll find the code is even more bloated and unreadable.