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>
Related
How can I break the line of a specific word in css?
I have the following string and I need the line to break at We'll.
obs: This string is a i18n.
"Your subscription has ended. We'll have your final invoice available soon."
"We'll" Need to go to the second line.
enter image description here
With css only it won't be easy, if even possible.
Can you also edit the html?
If so you can add a <br> tag before the "We'll" to insert a line break at that point.
Something like:
<p>Your subscription has ended.<br>We'll have your final invoice available soon.<p>
You can read more about the <br> tag here.
EDIT: Just saw that the issue is with an i18n string.
In that case you can use the break-line character \n and a white-space: pre-line on the css.
Example:
<p class="text">{{string}}</p>
.text { white-space: pre-line; }
{
text: "Your subscription has ended.\nWe'll have your final invoice available soon."
}
The white-space property helps you handle how the white space will be renderered, just take note that breaklines inside the <p> tag will be rendered too, so will might need to keep everything on one line in the code
You can use a <br> like proposed or an <span> with a class and display: block if the change is only aesthetic and you need something with no semantic value
Example:
HTML
<p>
Your subscription has ended.
<span class="br">We'll have your final invoice available soon.</span>
</p>
CSS
.br {
display: block;
}
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 developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
Hi there I am not sure how to go about a particular problem so here it is.
Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.
So far I have tried this:
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
I use a separate stylesheet
and have tried such things as display inline with no luck.
I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.
Thank you.
You need another set of containers indie your container:
<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )
You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)
#container {
display: flex;
}
For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.
And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies
If I understand what you're wanting to do. You could give the tag a class/style and do float:right in the CSS. Which would look like this:
<p style="float:right;"><img src="image.jpg" /></p>
Do yo want text flow around image? If yes then it is something like this:
http://jsfiddle.net/2FMPf/1/
If you want separate column for image, then it is something like this:
http://jsfiddle.net/2FMPf/2/
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this