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/
Related
I need help coding a poetry book. The book will be available on amazon and readers will be able to change the text size. I need the lines to wrap with a hanging indent if they are longer than the width of the reader's device.
The book is currently set up so that each stanza is its own paragraph and each line has a at the end of it. How can I ensure that the lines will wrap with a hanging indent? It will be translated into an EPUB document.
All advice is appreciated thank you.
You might try something like this:
.hang {
padding-left: 2em ;
text-indent: -2em ;
}
Notice there is a point / period / full stop before "hang".
Then every other paragraph would be tagged as follows:
<p class="hang">
Or You can try something like this, if You don't mind solving it without CSS:
<p width="-30">First line</p>
<p width="-60"> Second line</p>
<p width="-30">Third line</p>
<p width="-60"> Guess which line</p>
<p width="-30">Next line</p>
<p width="-60"> And so on</p>
Then there is this topic, and also this one.
Also You can ask it over at Ebooks Stackexchange!
Hello i have been coding on a template and there seams to be a problem when articles from my website are being echoed,
Here is my code (Note: This code is the same twice just with a different content)
<section class="slice bg-5">
<div class="w-section inverse">
<div class="container">
<div class="row">
<div class="col-md-5" style="display:inline-block;"> <h3>IceSword</h3>
<p> Voici un news </p>
</div>
HERE IS A IMAGE -------------------------> http://i.stack.imgur.com/g5suv.jpg
in real world scenario the words not as long as you are using in demo.
i mean if the word is too much long (without space) then it will break through its container, you can apply word-break rule but its not necessary.
just try demo with some real paragraph or lorem ipsum paragraph, not with a series of single characters without space.
but if you explicitly want to break words then try this css property:
p {word-break:break-all;}
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
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
I have two span elements. I want them to sit side-by-side and contain some text. Is this possible? If so what am I doing wrong?
.added-box{
background-color:#06C;
padding:8px;
margin:8px;
}
.edited-box{
background-color:#093;
padding:8px;
margin:8px;
}
And the page code is:
<p align="right">
<span class="edited-box">sfds<span>
<span class="added-box">sfds<span>
</p>
Edit: What I am hoping to get is a box, somewhat like the one on this page which has my name, time I asked the question and my points. I don't mind how I get it, but css is preferred, it looks like StackOverflow is using a table. Is this the only way to do this?
You have two typos in your HTML where you are failing to close the <span> tags with </span>. It should be:
<p align="right">
<span class="edited-box">sfds</span>
<span class="added-box">sfds</span>
</p>
This typo is causing your edited-box class to wrap everything and therefore the CSS is breaking.
Use for space between spans.