Is there a way to preserve line breaks from user input. At the moment I am just getting the user input sending it to mongoDb and returning that text. However if my input is :
"new
line",
my output would be "new line".
Can anyone suggest a fix?
Use css white-space for styling it.
.foo {
white-space: pre-line;
}
a small addition to #FELIXMOSH's correct answer: also use word-wrap because white-space property can cause overflowing sometimes. And apply this css to the element that will host the mongodb data.
anyClass {
white-space: pre-wrap;
word-wrap: break-word;
}
Related
I am having a hard time trying to prevent the overflowing text inside a codeblock. The problem seem to be only with codeblocks, which ignores its parent container width.
As per the example below, when editing using a codeblock the text is not breaking into new lines when reaching the end of the container.
https://codesandbox.io/s/1oqr4xyy6j
Demo - https://codesandbox.io/s/r4qx32m8wm
I made this change in rich-editor.css
CSS
.RichEditor-editor .public-DraftStyleDefault-pre pre {
white-space: normal;
}
You can add the following to your CSS:
pre {
overflow: hidden;
}
Working example here.
I am using the Ant design components for React.
I would like to fixe the size of the multi selection input fields in order to have the selected values into the same line without taking a new line like is the default behavior :
https://ant.design/components/select/#components-select-demo-multiple
I need to have the values ranged into the same line.
I can fixe the size of the input fields by overriding the style
.ant-select-selection--multiple:before, .ant-select-selection--multiple:after {
display: inline !important; }
But when I select several values, then they are outside the inputr field.
Finally I found a solution by adding this css style options :
.ant-select-selection--multiple
{
white-space: nowrap;
height: 30px;
overflow: auto
}
Thus the div is looking like an input text field and when the content ground a scroll appear at the right side of the div field.
You can specify maxTagCount
<Select
mode="multiple"
maxTagCount={1}
>
// here is rendering of the Opitons
</Select>
I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.
So how can I create a line break that will only work on a mobile device sized screen?
I am not very experienced in coding, so please be specific :) Thanks a lot for any help!
Why not just do a line break as a class in the tag?
<br class="mobile-break">
and in CSS
#media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
If you use Bootstrap 4 just use the break like this:
<br class="d-md-none">
You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally.
You can then use a media query to display the line break at specific mobile screen sizes, for example:
.br-on-mobile {
display: none;
}
#media screen and (<Your conditions here>) {
.br-on-mobile {
display: static;
}
}
EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle
EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.
You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.
If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):
<br class="md:hidden">
Instead of space between the number, add this is non-breaking space which will prevent a new line being added.
This should work on BULMA: <br class="is-hidden-desktop" />
I need to replace \n to <br>. But it is taking this as in text.
How can I do that without using dangerouslySetInnerHTML?
Insert the text as you normally would, and fix the line breaks with CSS:
white-space: pre-wrap;
Don't use dangerouslySetInnerHTML unless you really have to.
var yourNewValueWithBr = yourOldValue.replace(/\n/g,"<br />");
After replacing this text, you will need to use dangerouslySetInnerHTML to render it as HTML.
This solution replaces \n to <br> and works without dangerouslySetInnerHTML:
render: function() {
var lines = this.props.text.split("\\n").map(function(line, n){
return (n == 0) ? [line] : [<br />, line];
});
return <div>{lines}</div>;
}
But if you need HTML formatting, and you're sure that your text is safe from XSS, I would recommend to stick with dangerouslySetInnerHTML and a regex replace like Chris Hawkes said.
You could use style={{whiteSpace: 'pre-wrap'}} for the wrapping div.
Now you will break line without dangerouslySetInnerHTML and <BR>
You can check browser compatibility over here: CSS SPEC
I am reading educational data from facebook and showing it to my page directly. I find some string too long so i want to put ... after certain number of character in angularjs.
ex
jeevan sadhana english medium high school 08
to
jeevan sadha..
There are two possible solutions.
Using pure CSS, use text-overflow: ellipsis; along with overflow: hidden;. Obviously, your element will have to be fixed width.
You can use an Angular module such as angular-truncate.
Create filter in angular code.
Working http://jsfiddle.net/tUyyx/
Use filter code give in fiddle.
Then filter your content like :
{{ name | truncate : 25}}
If you want to add ellipses after n number of lines then we can do this using Jquery.dotdot plugin
Check this link Adding ellipses after n-bumber of lines in AngularJs
maxLength = 10;
str = str.length > maxLength ? str.substr(0, maxLength) + '...' : str;
I used these three css stylings and it worked for me:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Also ensure that the width is fixed (in px or %age).