I have a code setup for a FAQ page like this:
<p><strong>This Is A Question</strong></p>
<p><strong>Answer.</strong> This is the content of the answer, and I am going to keep
typing until it kicks to a new line.</p>
I do notice that when this displays via the browser the new line does not align up to the start of the Answer Content. Align as in from the left. I am also aware not to expect HTML to do such a thing, must question is. What are my options on coming across "indenting" this text per se?
Any help would be greatly appreciated!
Inspired by Nicole Sullivan's css .media element, you can check out a two column solution update to your jsfiddle.
I think this is what you want:
<p><strong>This Is A Question</strong></p>
<p><strong style="float:left">Answer.</strong>
<div style="display:inline-table;float:right">This is the content of the answer, and I am going to keep typing until it kicks to a new line.</div></p>
Edit: Scratch that, it works in FF + IE, but not in chrome
Try negative padding in CSS for the div of your paragraph.
Usually work across webkit and gecko.
Related
On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.
Example page
I have some <span> elements which are inline-block and after the last <span> I have a <br> to break a new line (could be more than just one <br>).
The new line works on Firefox but doesn't work on Chrome (v. 24). Don't know why.
I write this so people who are searching the internet would have something to read regarding this matter, because I did not find anything on google/stackoverflow regarding this.
as soon as u add content, it works. chrome just doesn't like giving you empty space.
try adding on the empty new line.
Edit: changing since there was so much discussion on the topic.
Firefox has a bug, it should not display the newline. According to W3C standards the element "must be used only for line breaks that are actually part of the content". Without content following the <br>, it will not create this newline.
Might not be the best solution, but if you add a white space after the <br /> it works in Chrome.
<br />
Solved: http://jsbin.com/ezatoy/32/edit
By adding a ZERO WIDTH SPACE to the container element like so:
div:after{ content:'\0200B'; }
This insures that there will be some content after the last <br> occurrence, effectively breaking into a new line. no need to add/change any DOM.
I'm trying to get the paragraph text to start on a new line after the tags that I'm using for my sybtitles, but I just can't get them to budge. I've tried display:block and giving it a right margin to occupy the entire div width but nothing seems to be working!
You can see an example post here:
http://vhbelvadi.com/2012/04/21/mozilla-boot-to-gecko-good-early-too-late/
As you can see at the very first subheading, there's some of the paragraph text right next to it and it all looks shabby and unorganised! I want the paragraph to start on a new line automatically, every time.
Thanks in advance :-)
Looks fine to me. Any chance your style sheet is being cached and you're just not seeing the updates? If so, it might be worth applying the technique described here just in case. I use it on various client sites and it's saved me a few headaches.
I'm having difficulty trying to get IE7 to behave like a normal browser.
I have a HTML sample here: http://jsfiddle.net/6QSYM/4/ that looks fine in most browsers, but when viewed with IE7 you can see that the "Sector Used" text is merged with the line below it.
Can somebody suggest how I can correct this?
I run into this problem all the time! At the company I work at we still have to support IE7 (will it ever just DIE!). So the best solution I have found is to set the width for your none floating div. It's a hassle but that why IE knows how to calculate the layout.
Try adding:
clear:both;
to your .risk-statistic-container class.
Try this:
http://jsfiddle.net/6QSYM/9/
the semantics of your HTML elements are all over the place as well. Way too many spans and divs for me :)
Hope that helps.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.