I have a html code where I want to store long paragrapsh of information. The only issue is that in my code I don't want hundreds of sentences on just one line. Id rather see it formatted like:
<div id ="sidebar">
<div><b> Things to take into account: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</div>
</div>
However, when I do it this way and run my website the words run outside the container they are in
Can you help give me a way to display it this way in the code while keeping the words inside it's container?
my css:
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
display: block;
}
UPDATE: changed X to words and fixed it. Weird but ok lol
Your issue is that xxxxxxxxxxxxxx is considered one word and by default the browser won't break this word.
adding
word-wrap:break-word;
Will fix this, but I would guess once you use actual text in there it will break more naturally since it won't be a single word of so many characters.
fiddle: http://jsfiddle.net/ktbypbtt/
Here is another fiddle without the word-wrap, but with actual text.
http://jsfiddle.net/ktbypbtt/1/
Notice how it breaks itself since the browser will naturally wrap the word after each word if it hits the end of the div, but needs to be specifically told to break words.
Just add a <br> tag where ever you want the text to go to the next line
<div id ="sidebar">
<div><b> Things to take into ACCOUNT: </b></div>
<div>
<p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</p>
</div>
</div>
Helpful? Let me know :)
add some css.
#sidebar{
display: block;
}
or add a class to your wrapping div and do the same thing with setting display as block
edited
You could cut off the overflow:
#sidebar{
overflow: hidden;
}
http://jsfiddle.net/5deyo1tb/
Related
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
Browser is replacing Multiple space between words to the single space in html page. for e.g if my text is 'AB-DC 3' in Browser its showing 'AB-DC 3'. Inspect window its showing 2 spaces 'AB-DC 3'.
you can also try out yourself. just inspect element and add multiple spaces in word of any line check.
is there any solution for this??
Similar question answered cause, but not explaining how to resolve this.
Whitespace is non-significant by default, and is compacted down to a single space when rendered.
CSS can change that: white-space: pre-wrap will provide the default line-wrapping functionality that you would expect, plus the significant-whitespace behaviour of preformatted text. Best of both worlds!
<pre>AB BA</pre>
pre tag will also solve your problem
On the Op scenario:
Use white-space:pre; (no wrap except at <br>) or white-space:pre-wrap; (wrap when needed).
Example:
body{
margin: 0;
}
div {
width: 200px;
height: 100px;
}
#a {
white-space:pre;
background: gold;
}
#b {
white-space:pre-wrap;
background: skyblue;
}
<div id=a>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
<div id=b>This is some Text writen on here as example.<br> Here's a second sentence after the line-break .</div>
Single White spaces:
Sometimes you need to use single spaces, like at the start of a sentence (when it is ignored). In situations like this, the best choice is to use instead.
Example:
p:nth-of-type(1) {
font-size: 2em;
background: tomato;
}
p:nth-of-type(2) {
font-size: 2em;
background: greenyellow;
}
<p> content</p>
<p> content</p>
To avoid changing your style of display.
Better to use style:
<style>
{ white-space: pre;}
</style>
If you give so many spaces in html it is of no use because browser will consider only one you have to use space entity the no. of times you type this entity browser will so that much spaces
HTML:
<p>He llo</p>
It will show exact 4 spaces in the work
Here is the fiddle link https://jsfiddle.net/yudi/zrqrfw98/
Okay. So I have a div full of spans and every span has a word or a few inside. The div fits multiple rows and has a fixed width. I need the span contents to stay same on the same row, not to break so that one word in a span is on the first and the rest of the words on the next one.
Let me give you a small example.
HTML
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
CSS
div{
text-align:center;
width:400px;
}
span{
margin-right:10px;
}
Now the result I'm looking for is something like this:
Hamburgers Pizza and hotdogs
Milk and beer Kids menu
But what might happen is this:
Hamburgers Pizza and hotdogs Milk
and beer Kids menu
I tried setting white-space: no-wrap but that just set everthing on one row. I have a feeling that using the white-space: no-wrap the right way is the key, but I haven't got to it yet.
I hope you get the point what I'm trying to achieve and where I am now.
white-space: nowrap; will prevent any type of line wrapping. It sounds like you want to use non-breaking spaces in your titles, which will prevent the phrases from wrapping in the middle. For example:
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
Note: the is called an HTML entity. It will render just like a regular space character to the end-user, but it tells the browser to not allow words to be broken into multiple lines.
See this reference: W3CSchools white-space reference
You can apply white-space: pre to your spans using css. This will allow them to wrap on line-breaking white-space characters, but not other white-space characters.
div {
text-align: center;
width: 400px;
border: 1px solid red;
}
span {
margin-right: 10px;
white-space: pre;
}
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.