I have a database with an input of text (as opposed to string) and I am outputting it in a tag in html. Unfortunately it outputs a block of text and I don't know how to style it at all, or even create a line break.
DB Field is:
t.string :content
In my text_area input, the text is a simple lore ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec risus ligula. Nulla quis bibendum justo. Sed nec tempus nisi. Curabitur in justo in mi ornare dictum sed et mi. Praesent sodales arcu nec ligula accumsan et gravida nulla gravida. Nullam in diam odio, a malesuada eros. Nunc et magna quis odio fermentum porta in et magna. Aliquam erat volutpat. Duis interdum, lacus malesuada mollis ullamcorper, tellus turpis placerat magna, non gravida tortor magna vel turpis. Nunc eu nunc nec nisi scelerisque mollis at cursus lectus. Quisque varius condimentum neque elementum rutrum. Cras porta, felis vitae porta cursus, nisl turpis tincidunt turpis, eu molestie ipsum ligula sit amet lectus. Sed aliquam lobortis nunc, at lobortis magna tristique vel. Donec faucibus ipsum non elit rhoncus posuere.
Html is simply
<p><%= #building.content %></p>
The input HTML is
<%= f.label :content %>
<%= f.text_area :content %>
I have no CSS styling on it yet.
How exactly are you wanting to format the text? If you just want to change the font, justification, size, or emphasis then you can just use CSS. If you're wanting to turn text into multiple paragraphs I'd probably just save it that way to the database. Though you would want to html encode the text first and then decode before outputting it to the page. HTH
try this and fix your width according to your requirement.
<p style="word-wrap: break-word;"><%= #building.content %></p>
Related
This question already has answers here:
Style certain characters with CSS
(5 answers)
Closed 3 years ago.
I think the answer here is "no", but some of the tricks css3 pseudo selectors can be harnassed to perform come close to magic at times.
I want to find and style the period character inside spans. Don't ask why, the context is ridiculous. Sadly the character can't be relied upon to exist in the same position on each occasion, so it has to be found. I think without JS this can't be done but wanted to confirm.
Overall no... however you could wrap each character in an element, which you can then style.
A simple bit of JS can be used to do this.
const el = document.querySelector("#find-periods");
el.innerHTML = el.innerHTML.replace(/\./g, '<span class="char-period">.</span>')
.char-period{ color: red; font-size: 30px; }
<p id="find-periods">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tristique massa, ut convallis risus. Vestibulum maximus sed libero ut lacinia. Integer vel mollis ex. Nullam mattis ipsum in massa aliquet pharetra eget nec enim. In vitae sem at nibh mollis finibus. Quisque id pretium velit. Donec nec augue volutpat, sodales dui id, eleifend augue. Nulla lobortis congue est ut venenatis. Ut mollis nisi ac purus auctor, nec sollicitudin mi vestibulum. Integer tincidunt, metus sit amet euismod porta, nisl nisi accumsan lectus, id lacinia nunc arcu vitae massa. Nunc et tellus ante. In mattis ex sed sem hendrerit elementum. Ut leo libero, convallis sit amet massa et, tincidunt malesuada augue. Pellentesque consectetur maximus maximus. Duis suscipit dolor risus, sed egestas libero iaculis ac. Phasellus consectetur quam ipsum, in finibus leo fringilla a.
</p>
I have this line of code here in my view
I have this string #Model.inventory.overview and it has — in it.
When I try to use it so it will display the special html character it shows up as the text —
#Html.Raw(Model.inventory.overview)
and
#MvcHtmlString.Create(Model.inventory.overview)
This is what #Model.inventory.overview is
Lorem ipsum dolor sit—amet, consectetur adipiscing elit.
Mauris eget feugiat nibh. Fusce rhoncus ex et nunc fringilla, ut
fermentum tortor volutpat. Praesent mollis efficitur magna auctor
sollicitudin. Morbi pulvinar, justo ut efficitur rutrum, dui metus
varius magna, vitae molestie leo elit vel turpis. Nullam quis ipsum
nec erat maximus dictum sit amet sed ligula. Vestibulum tincidunt
dolor non—justo accumsan, eu euismod neque rutrum. Donec in
lacinia est.
I have also tried the following:
#Html.Raw(HttpUtility.HtmlDecode(#model.ContentBody));
Still not working.
#Html.Raw(Html.Encode(Model.inventory.overview)) was the solution after all.
I looked at W3C Html ASCII characters list and had a suspicion — wasn't "exactly" a ASCII character, so I found this site soon after. Glad I was helpful.
I know float:left will allow text to flow around an image floated on the left.
And float:right will allow text to flow around an image floated on the right.
Is there a way to flow text around both a left and right image?
It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned.
<img src="http://placehold.it/100x200" style="float:left;">
<img src="http://placehold.it/100x200" style="float:right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra diam finibus arcu dictum, sed condimentum neque eleifend. Nullam non lobortis leo, a sollicitudin ipsum. Pellentesque gravida aliquet eros, in imperdiet eros dictum eu. Aenean vel pharetra libero. Nam vel risus sit amet tortor fermentum venenatis. Aenean efficitur, ante ac semper porta, turpis nunc dignissim risus, sed ullamcorper dolor lacus a felis. Sed vel nulla imperdiet, luctus tellus sed, pharetra sem. Nullam vehicula elit eget urna lobortis, at porta nunc tempor. In gravida aliquet rutrum. Cras at lacus ac felis egestas aliquet. Aenean viverra eu mauris a fermentum. Donec pharetra nisl ex, sit amet sodales orci lobortis id. Nullam lobortis dictum pharetra. Cras pellentesque rhoncus magna a ultricies. Quisque et vehicula risus, in porttitor ex. Quisque aliquet blandit velit ut gravida.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
As you can see in the image below I have a survey with long answer text that takes several rows for each answer:
What I want to do is to align the rows to be aligned with the first row of each answer. Is that possible?
You can use the display property in CSS to fix this issue. I made the survey divider a table and the label inside it a table-cell, which by default keeps all text on the same vertical line.
However, each answer is in its own divider in this example as I was unable to force the input to take the display property and use it alone. This should do the trick though, and I am sure there is a simple workaround for that, or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List items in survey</title>
<style>
div.survey-answer {
display: table;
}
label {
display: table-cell;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="survey-answer">
<input type="checkbox" id="survey-answer-1" /><label for="survey-answer-1"><b>ANSWER 1</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum.</label>
</div>
<br />
<div class="survey-answer">
<input type="checkbox" id="survey-answer-2" /><label for="survey-answer-2"><b>ANSWER 2</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at metus a pharetra. Phasellus sit amet metus non arcu sodales hendrerit. Etiam dictum id magna pulvinar laoreet. Mauris sodales sapien non arcu molestie molestie. Proin blandit varius nisi, vel suscipit est tempor quis. Morbi posuere metus sit amet sem ultrices, eget rutrum diam aliquet. Donec vel sem eu turpis convallis aliquam vitae eget justo. Vestibulum vel ornare lacus. Nulla massa massa, tincidunt ac tristique ut, euismod a urna. Nam tincidunt orci at sapien consectetur, non gravida orci bibendum.</label>
</div>
</body>
</html>
Demonstration »
Hope this helped you out!
I am trying put ads inside my blogger post & i want my data to wrap around the ads.I am using following code to make this happen.
Ex. Desired output.
.
<div style='float:right;margin:50px 0px 0px 0px;'>
<!-- AD1 Code -->
</div>
<data:post.body/>
<div style='float:left;margin:0px 0px 50px 0px;'>
<!-- AD2 Code -->
</div>
But i am not able to wrap the text around it & Second div sticks to the bottom without showing any data on the right side.
Is there any property which is left to be added apart from Float and margin.
EDIT: <data:post.body/> is the tag which fetches every blogger post content. so the data for the post come automatically. This code has to be added in the template so that it works for every post. I can't hard code the Div tags inside every post so i need some method to arrange ads around my post.
I can put the divs with the specified properties at the starting or ending of the <data:post.body/> tag.
Thanks.
You can try this :
<div style="text-align:justify">
<div
style="float:right;margin:5px;border:2px solid red;height:100px;width:100px">
Ad 1
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis
ultrices felis, sed faucibus elit sollicitudin eu. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Etiam id mi a elit luctus tristique. Curabitur pharetra magna ac nisi
accumsan a consequat magna placerat. Aliquam erat volutpat. Integer id
felis ante, et malesuada leo. Duis scelerisque vulputate lorem, at
cursus eros rutrum pulvinar.
Nunc tempus ultricies varius. Suspendisse interdum imperdiet enim, quis
aliquam sapien pulvinar in. Morbi vulputate euismod elit, ut ultricies
lectus dignissim at. Venenatis ullamcorper purus at consequat. Integer
ultricies, quam vitae fringilla venenatis, urna felis tincidunt turpis,
quis volutpat nisi felis tincidunt turpis. Proin at metus sit amet augue
convallis laoreet. Etiam viverra mollis ornare.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Pellentesque libero lectus, laoreet quis consectetur sit
amet, laoreet vel. Suspendisse commodo fringilla facilisis. Nam viverra
laoreet lorem, at molestie vestibulum non.
<div
style="float:left;margin:5px;border:2px solid red;height:100px;width:100px">
Ad 2
</div>
Etiam ut nulla justo. Quisque dignissim ultrices faucibus. Maecenas volutpat,
eros nec rutrum eleifend, enim dolor gravida nulla, quis vestibulum neque
dolor vel purus. Etiam imperdiet mollis magna, eget interdum eros tincidunt
quis.
Sed a ligula metus, ac ornare elit. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Suspendisse sit amet lacus felis.
Phasellus ultrices facilisis interdum. Morbi dapibus turpis a nisl mollis in
hendrerit quam luctus. Cras eleifend mauris eu lectus viverra ullamcorper.
In sed erat et lacus dapibus fermentum. Donec bibendum, eros ac convallis
fermentum, dolor justo tincidunt risus, vitae lacinia lorem risus eu ipsum.
Morbi fringilla ante ut ipsum blandit vehicula.
</div>
Preview : http://jsfiddle.net/Gs2kD/
The "clear" attribute can prevent any floaters at the same Y position as the element that it's on.
Check out Sandbag Float Pusher, and the other sandbags on css-lab.com. It uses a thin dummy floater on the same side to push the "ad" down to where you want it. The "ad" has "clear" set. This technique allows you to flow the content in without modification, as you require.
Google for css sandbag for more techniques.
You can put the ads inside the post with JavaScript, especially easy with jQuery for example.
The only thing you have to figure out, is how to find a good location for you ads, i.e. where to actually insert them in the code.