I am storing content in the database, for example:
Hello
This
is
Text
and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:
Hello This is Text
How can I fix this problem?
Set a style on the div: white-space: pre or white-space: pre-wrap
Example: http://jsfiddle.net/fPv6S/
To add some info on #Explosion Pills correct answer and extract some info from MDN:
The CSS white-space attribute is there to help:
pre:
white-space: pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
This might result in unwanted horizontal scrollbars as shown in the example!
pre-wrap:
white-space: pre-wrap
Sequences of white space are preserved. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
As #ceremcem pointed out the line breaks at the end of the box will not be transferred when the text is copy-pasted, which makes sense since these line breaks are not part of the text formatting but rather of the visual appearence.
pre-line:
white-space: pre-line
Sequences of white space are collapsed. Lines are broken at newline
characters, at <br>, and as necessary to fill line boxes.
div{
border: 1px solid #000;
width:200px;
}
.pre {
white-space: pre;
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
.inline-block{
display:inline-block
}
<h2>
pre
</h2>
<div class="pre" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-wrap
</h2>
<div class="pre-wrap" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
pre-line
</h2>
<div class="pre-line" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
<h2>
Chrome FIX
</h2>
<div class="pre-line inline-block" contenteditable=true>Lorem ipsum dolor sit amet doesn't have a meaning but here comes 10 white spaces:____ ____</div>
EDIT 08/14/2018:
In Chrome you might experience troubles: Pressing Enter will generate a new <div> inside your contenteditable. To prevent that you can either press Shift+Enter or set display: inline to the contenteditable <div> as seen in the fiddle.
Try this......
var patt2 = new RegExp("<div>","g");
var patt3= new RegExp("</div>","g");
var patt4= new RegExp("<br>","g");
var z=x.replace(patt2,"\n").replace(patt3,"").replace(patt4,"");
That will do it...
You could search and replace newlines with <br />.
http://jsfiddle.net/fPv6S/1/
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
http://brm.io/jquery-match-height-demo/
https://codepen.io/edge0703/pen/iHJuA
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
I am a complete beginner at html and css. I've trying some of the things and sometimes the css code written sometimes do not work but I don't know why? Where is my fault or error ? Please help me by taking a look at the code and The error in this code is that anything after the video tag isn't changing its color.
<!DOCTYPE html>
<html>
<head>
<title>
Just some experiments
</title>
<link href="./c.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="header">
This is the first and biggest heading
</h1>
<h2>
Now comes the subheading.
</h2>
<h3 id="subheading">
This is the third sub-heading. For this third sub-heading styling I
used the styling by the adjacent selectors i.e. h2+h3
</h3>
<h3 id="subheading">
This is the fourth sub-heading which has the size as that of the third
sub-heading.</h3>
<p>
This is supposed to be a paragraph. So without any waste of time,
I'll be pasting LOREM IPSUM.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum
<br>
<span href="css.txt">This is the child of the above paragraph.
</span><br>
<span id="vanquish">The name of the class of this span tag is just
seriously random and really means nothing but at the same time means a lot
to
many of the youths.<br> Vanquish is the flagship model of the Aston Martin.
</span>
<span href="desertsunset.png" id="vanquish"> Now we are out of the
previous span tag.now stepping into new span tag.</span>
</p>
<span> This is written in the span tag which is outside of the
paragraph tag which is only the descendent of the body tag.</span>
<video src="./video.MP4" width=640 height=480 controls>
Video is not supported by your browser</video>
<div id="main">
<span>Hi this is Srajan</span>
<span>This is the paragraph inside another paragraph</span>
<div> This is inside the div tag and now we'll be adding inside another p tag
<p>So this is actually being written inside two levels deep to the initial p tag. </p>
</div>
</div>
</body>
Now the css code.
*{
font-family: arial;
color: lightgreen;
border-radius: 50px;
}
body{
background-color: black;
}
h2+h3{
color: aqua;
}
#subheading{
color: lavenderblush;
}
span[href]{
color: aqua;
}
#main{
font-size: 20px;
font-family: monospace;
color: white;
}
As expected the result must have changed the color of the tags below the video but it didn't happen
Please explain why?
OK, so the problem here is not with the <video></video> tag. The problem is with
*{
font-family: arial;
color: lightgreen;
border-radius: 50px;
}
here you are giving
color : lightgreen;
to every line of text in your html document. So, when you write `
#main{color:white;}
this applies to only the element you have written it for. In this case only <div></div> element gets white colored text. So, when you write <span> in <div> the <span> takes the default color i.e. lightgreen. To understand better you can trying running this code:
<div id="main">
this text will be white
<span>this text will be lightgreen</span>
</div>
To avoid this problem don't give lightgreen color to the entire document. Rather then make a class
.gr{color:lightgreen;}
and add it to the tag you want to make lightgreen. Or if you want to proceed according to your approach (not recommended), then just change your code
#main{color:white}
to
#main > span {color:white}
this will apply white color to the <span> tag.
I have a short text that is followed by an SVG in a limited-width container.
The expected behaviour is that the text breaks if it's longer than the container width BUT I would like it NOT to break right between the text and the svg:
Current result:
Expected result:
Adding a <nobr> or a <span>tag in the middle of the text (before blue) and closing it after the SVG is not an option as the text comes from an external database and cannot be edited.
<span class="text">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg">
<svg>
....
</svg>
</span>
add display-block to svg container:
.svg {
display: inline-block;
}
The only solution I found required a nasty change in the origin HTML.
To make sure the icon is never alone in the new line I wrapped the last word and the icon in a new element with white-space: no-wrap;, plus if we want it to still split if the line cannot accommodate last word with the icon we can make this new container inline flex and flex-wrappable.
<div>
Lorem ipsum dolor sit
<span class="last_word">
very_long_last_word
<svg>...</svg>
</span>
</div>
.last_word {
/* Stick icon to last word */
white-space: no-wrap;
/* Make sure last word and icon will break ultimately */
display: inline-flex;
flex-wrap: wrap;
}
Live example: https://jsfiddle.net/uerzo6sa/
You can prevent the line breaking with this markup. It doesn't need to include the last word, so you can use it even with a generated content.
JSX
<div>
{children}
<span className="tail">
{'\u00a0'}
<svg></svg>
</span>
</div>
HTML
<div>
Lorem ipsum dolor sit<span class="tail"> <svg></svg></span>
</div>
CSS
.tail {
white-space: no-wrap;
}
https://jsfiddle.net/radarfox/65h40jt7/
You can add padding to the text and a negative margin:
<span class="text" style="padding-right: 15px;">
Jack Wolfskin Jacke Colorado Flex - Midnight Blue
</span>
<span class="svg" style="margin-left: -15px;">
<svg>
....
</svg>
</span>
That way, if there isn't room for the padding, the last word will get pushed to the next line also.
(This is based on this answer: https://stackoverflow.com/a/25857961/5899236)
You can define position: absolute on the SVG, with auto for top, right, etc.
https://codepen.io/jsit/pen/xxOQoVW
The only side-effect is this will allow the SVG to appear outside of the containing box; this is in a sense the reason it works at all.
I have a div that text can be dynamically added to. Using CSS regions, I make the text flow from one div to another. However, it seems I have to know how many divs I need in advance for fit the text. I want to only create a div to flow into when the one before it overflows. I haven't been able to find an onOverflow event. Below is my working static example that I modified from the HTMLRocks example. I would like this but without having to create 3 "regions" up front. I'd prefer to only create one at first and then generate others as needed. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
-webkit-flow-into: article-flow;
display: -webkit-flex;
display: flex;
}
.region {
-webkit-flow-from: article-flow;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px black;
}
</style>
</head>
<body>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
If you are using jQuery you can compare the scroll width with the divs width and then create more divs.
if ($('.region')[0].scrollWidth > $('.region').width()) {
//Text has over-flowed, create another div
}
There is the regionoversetchange to listen to and add more regions. For the moment, you will have to use the webkit prefix in Chrome and iOS.
The NamedFlow has a property called overset. If true, more regions are needed. If it is false, you have more - or exactly - the amount of regions required.
The NamedFlow also has a firstEmptyRegionIndex property which indicates at which index of the region chain do regions start to be empty because no content has reached them.
var flow = document.webkitGetNamedFlows()['myFlow']
flow.addEventListener('webkitregionoversetchange', function(){
flow.overset // true or false
flow.firstEmptyRegionIndex // -1 if no empty regions, other index otherwise
}
Is there any CSS workaround to make the pdf/doc/ppt icon always sit at the end of text line, without using a background image? When there is not enough space for the icon image, it will sit in second line alone. I'm wondering if there is anything similar as white-space:nowrap?
<ul>
<li>
Lorem Ipsum is simaorem Ipsum. (3MB, PDF)
<img src="images/pdf.gif" />
</li>
</ul>
<ul> has a fixed width.
Images are text, or “inline content,” from the perspective of layout. Thus, you can use same techniques as for preventing line breaks in text. The nobr markup prevents line breaks and works universally in browsers, though standards-writers have frowned upon it. If needed you can use its standardized, less reliable, more verbose sister: white-space: nowrap in CSS, together with some inline markup like span.
Here the problem is that you would need “overlapping” markup: ... (3MB, <nobr>PDF)</a><img ...></nobr> (i.e., open a nobr element inside the a element but close the a before nobr). While this works, it violates HTML syntax rules, so I’d suggest that you move some text out of the a element (it probably does not need to be there):
Lorem Ipsum is simaorem Ipsum. (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>
or
Lorem Ipsum is simaorem Ipsum. (3MB, <span
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>
You can add an inline child to your list item and give it a background image.
<ul>
<li><span class='bg'>Lorem Ipsum is simaorem Ipsum. (3MB, PDF)</span></li>
</ul>
...
li .bg {
background-image: url(...);
background-repeat: no-repeat;
background-position: 100% 100%;
padding-right: 24px
}
See a demo here: http://tinkerbin.com/qbwNWFBb
ul li a:after {
content: url('http://placekitten.com/16/16');
}