Develop Reference

How do you include a linebreak taken from a textarea in a paragraph?

I am using a textarea in my view page to store information in a database, then retrieve it to put in a paragraph. Sometimes I have to include a new line in the textarea, but it is always stored in the database as "a b c", when i retrieve the data to put into a paragraph the new line does not appear. It always shows in a horizontal format like "a b c". How can i show the same style in paragraph format?

After you read the text from the database and before you show it in the paragraph, you will need to replace the newlines with HTML line breaks.
string text = textFromDatabase.Replace(Environment.NewLine, "<br />");

Make the textarea wrapped in pre tag
<pre><textarea>CONTENT
CONTENT
</textarea></pre>

Use Pre tag to display the data this will consider the line breaks as entered in the textarea you dont need to put textarea inside pre tag as mentioned in the answer of #user3820407
<pre>
Your Text
</pre>
see http://www.w3schools.com/tags/tag_pre.asp

<p id="paragraph">
</p>
<script>
var ContentFromTextArea = "Your text area content goes here.";
ContentFromTextArea.replace("\r", "<br />");
ContentFromTextArea.replace("\n", "<br />");
$("#paragraph").html(ContentFromTextArea);
</script>

Retrieve database content without linebreak

(asp.net C# project)
I am trying to show contact info in my footer, I receive the info from the database, but in my administrator panel I have CKEditor which adds linebreaks. So, what my problem is that I'd like my text in my footer to have no linebreak, is there any way of doing this?
How it looks in my contact page:
Adresse
Zip, City
Phone
Fax
How I would like it to be in my footer:
Adresse, Zip city, phone, fax
I receive the texts using:
<p><asp:Literal ID="LitContent" runat="server" /></p>
LitContent.Text = textService.GetText("ContactInfo");

LitContent.Text = textService.GetText("ContactInfo").Replace("<br />", " ");
but you should check how the BR is formatted from the editor. It may be capitalized or without /
It is also possible that the HTML generated by the editor uses paragraphs instead of br. In this case it becomes more complex to remove them. Basically to answer your question correctly we need more information. What is the actual string that GetText returns.

This looks like a formatting Problem.
There's a string and you can replace the Linebreaks out of a string. The code shown below do this by replacing the Linebreak with a blank. Should be the easiest way of doing this
infoText = textServices.GetText("ContactInfo");
infoText = infoText.Replace(Environment.NewLine, " ");
LitContent.Text = infoText;

How to make string bold in code behind

Is there a way to make a string bolder in code behind using C# .NET?
I tried:
string TypeofDay = "<span style='font-weight: bold'>Type Of Day</span> ";
txtbox.Text = TypeofDay + ": " + "Delivery Day"
I am concatenating TypeofDay(bold) and "Delivery Day" to display in a textbox.

You can't make some bits bold and some bits not bold, in an <asp:TextBox>.

You can't make text bolder by enclosing text value in tags. You must change attribute of a control that displays that text for example by setting its CSS class or changing code-behind property:
txbSendMessageBody.Font.Bold = true;

PS. I am concatenating few bold strings and some other strings to display in a textbox.
A HTML text box does not support this. ASP.NET (usually) generates HTML; if HTML does not support this, you cannot solve it from the server side.

A bit hacky alternative can be to use Unicode bold characters
http://qaz.wtf/u/convert.cgi?text=Type+Of+Day
txtbox.Text = "𝗧𝘆𝗽𝗲 𝗢𝗳 𝗗𝗮𝘆: 𝖣𝖾𝗅𝗂𝗏𝖾𝗋𝗒 𝖣𝖺𝗒"

You could layer a div on top of the textbox. Since the text formatting would change anyway once the user started typing, you can just hide the div once focus is given to the div, thus showing the text box. If nothing is entered and focus is lost, show the div again.

TextBox, no, however you could use a label.
myLabel.text = "<b>bold text</b> normal text <u>underlined text</u> <span style='font-size:Large; color:Red'>Big red text</span>";

show line breaks in output

when i enter text into a text area with linebreaks this is not being output later when i display the text. how do i let it show the line spaces?, instead all the text is cramped together at the moment.

How do you display it? HTML ignores whitespace, including line breaks. You can replace the linebreaks with the <br> element to show the enters in your browser too.
Mind that any subsequent spaces are also ignored. You can use the <pre> element too, to display the exact text, but I think that long lines won't be wrapped in that case.

If you are putting your text into HTML try this just before writing it out to the page:
string myText = "" // your text
myText = myText.Replace(Environment.NewLine, "<br/>");

this worked:
MvcHtmlString.Create(Model.Post.Description.Replace(Environment.NewLine, "<br />"))

Show more/less without stripping Html tags in JavaScript/jQuery

I want to implement readmore/less feature. i.e I will be having html content and I am going to show first few characters from that content and there will be a read more link in front of it. I am currently using this code :
var txtToHide= input.substring(length);
var textToShow= input.substring(0, length);
var html = textToShow+ '<span class="readmore"> … </span>'
+ ('<span class="readmore">' + txtToHide+ '</span>');
html = html + '<a id="read-more" title="More" href="#">More</a>';
Above input is the input string and length is the length of string to be displayed initially.
There is an issue with this code, suppose if I want to strip 20 characters from this string:
"Hello <a href='#'>test</a> output", the html tags are coming between and it will mess up the page if strip it partially. What I want here is that if html tags are falling between the range it should cover the full tag i.e I need the output here to be "Hello <a href='#'>test</a>" . How can I do this

Instead of doing too much manually, I prefer you to go with following jQuery plugin.
http://plugins.learningjquery.com/expander/index.html#getting-started
It will expand and collapse your text for Read more options, Also provide you much customization.
Hope this will help.
Thanks!
Hussain

This will be quite hard since HTML is not a regular language, so using regular expressions would be cumbersome.
Really want you need to do is parse the HTML into a DOM structure using jQuery $('html text') and then recursively go through the elements getting the length of each elements text using .text() and when you come to an element with causes the cumulative text length thus far to be over the limit, split this elements text at that point and set it the element's text to be the left of the split.
Then keep all elements before this one, and disregard all siblings etc that occur after this element. However I have no idea how to implement that simply.
On the other hand you could just strip the HTML tags away, why bother.

If you have the text in a dom element, you could use the innerText/textContent property of the dom element to get just the text without the tags. substring of this text could be used without worrying about the tags.
var post_dom = document.getElementById('#post-content');
var input = post_dom.innerText || post_dom.textContent;

I think the best solution here would be to use
var textToHide = input;
var textToShow = $("<div/>").html(input).text().substring(0, length);
which will convert your HTML to plain text and extract the first few characters for the summary. Then toggle between them when they click the ellipsis rather than trying to display both at the same time.

maybe you could rethink the problem : instead of modifying your text, you could modify the way it is shown on the page.
Say if you want to show only 3 rows of the content, you could modify the content's container style to a height equal to the height of one content row * 3.
Anyway, this could be easily implemented in jquery ,and if you take advantage of it's animate function, you could easily make your own plugin such as :
(function($){
$.fn.lessDetails = function(desiredHeight){
var desiredHeight = desiredHeight || 20; //or any other "default" value
return this.each(function(i){
$(this).realHeight = $(this).css("height");
$(this).css('height',desiredHeight);//or you could animate it
});
};
$.fn.moreDetails = function(){
return this.each(function(i){
$(this).css('height',$(this).realHeight || "auto");//or you could animate it
});
};
})(jQuery);
and then you could call :
$('.less').lessDetails(); $('.showMore').click(function(){$('#'+$(this).attr('rel')).moreDetails();});'
having your html structured as :
< div class="container"> < div id="1" class="less">content goes here </div> < a href="#" rel="1" class="showMore"> show more</a> </ div >
Haven't tested it ,but it should work, or at least should give you a basic idea of my solution.