I'm trying to figure out why the word wrap is not working properly on this page for the div class:
.gce-page-list
http://metaphysicalerotica.com/events/
It looks like the theme has added a "pre" and "code" tag and if I delete the "pre" tag everything works fine, however I need a CSS fix to make the word-wrap work properly and I can't figure this out! I have tried everything I can think of, any advice would be great!
Add this style to your style sheet:
pre, code{ white-space: pre-wrap; }
The easiest solution would be for you to go in you style.css and add this class to line 67 for the "pre" and "code"
word-wrap: break-word;
So the style would look like this...
pre, code {
font-family: Courier New, monospace;
margin-bottom: 10px;
word-wrap: break-word;
}
Related
i'm relatively new with this stuff, but i can't seem to figure out why the size isn't formatting?
CODEPEN: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 4rem;
font-weight: 200;
text-align: center;
}
It's because you have written the link tag inside the HTML section of the codepen.
To add any external css make use of GearIcon on the CSS Section and add the links there. Doing so, make the libraries get added on top of the webpage and your css written in the CSS section can override those styles.
Just as Josan already commented: There is a rule for ".jumbotron p" in bootstrap CSS defining "font-size". To make your CSS override that, link your external style sheet after bootstrap.
My example:
HTML:
<title>hello</title>
CSS (that I'd like to apply):
title {
text-transform: uppercase;
}
Output:
<title>HELLO</title>
Any ideas?
You don't. The title tag is not formatted text. If JavaScript is an option you can use: document.title = document.title.toUpperCase();
You can apply CSS to the element, but not though the style attribute (since it is for "All elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE").
I'm not aware of any browser that will apply CSS for the rendering of the title in browser tabs or title bars though.
You can, however, do something like:
head { display: block; }
title { display: block; font-size: 200%; font-weight: bold; }
Nothing in the head tag is stylable. if you really can't just add the uppercase in html you could do it in javascript but I highly recommend just typing the string in uppercase.
If the title is a little bit vague, allow me to explain.
I'm making a small Q&A app using NodeJS, MongoDB and Express.
Currently I'm doing the layouting part using CSS.
I have a small textarea, in which you can submit text, after you click the submit button, you are redirected to a page displaying the data you just inputted through the forms.
However, the main body of the text overflows the max-width I set for the div, this happened after I added the "white-space: pre;" property to enable line breaks in the post. Before that, the text would stay within the 960px width I defined for the div, but there wouldn't be any line breaks.
Jade code for this view:
extends layout
block content
div.pageContainer
h1 #{discussion.title}
span(id="categoryMarker" style="font-size: 1.25em;") "#{discussion.category}"
h3 #{discussion.author}
| -
span Created on #{discussion.date.toDateString()}
br
br
div#bodyText
p #{discussion.body}
footer
div.wrapper
a.hvr-grow(href="/discussions") Back to all threads
span.hvr-grow(style="color:white;") -
a.hvr-grow(href="/discussions/create") Start a thread
CSS stylesheet (Relevant to the p where the input from the textarea displays)
#bodyText
{
font-size: 0.75em;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
max-width: 960px;
}
#bodyText p
{
white-space: pre;
}
My text overflows like so: http://puu.sh/hC9ba/c7d7984e58.jpg
It should not do this. I look forward to any suggestion or tip.
Try white-space: pre-line instead of word-wrap: pre
The solution to this answer for me was using:
#bodyText p
{
white-space: pre-wrap;
}
Thanks to everyone who answered and tried to help me out.
Have you tried word-wrap?
#bodyText p
{
word-wrap: break-word;
}
I've started learning to use firebug to identify css problems, but I really have no clue about this one. HTML validator is saying that I should move the <span> tags inside the <div>:
Line 205, Column 55: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
<pre id=line1><span><div class ='pto_product'>
The problem is that there's no span tag before div class =pto_product in the html markup area in the plugin so I suspect there's something to do with the page template.
I've checked the span tags with firebug, and it seems to related to this line in the stylesheet:
pre {margin: 20px 0px; padding: 20px; white-space: pre-wrap;
white-space: -moz-pre-wrap; white-space: -pre-wrap;
white-space: -o-pre-wrap; word-wrap: break-word;
text-shadow: 1px 1px 1px rgba(255,255,255,0.85); }
address { letter-spacing: 1px; margin: 20px 0; }
I removed the whole line but nothing changed. I took a step further and deleted all the classes and ids in the stylesheet that contain "span" but that span is still there. Would anyone please tell me how to get rid of that tag? Any help is much appreciated.
Image http://i1350.photobucket.com/albums/p769/Stonecold_Stone/cssproblem_zps53199bb7.png
HTML validator
Page Link
If you use jQuery you can use this.
$("#line1").find("span").remove();
It's impossible. Check your code. I'm sure you use span or it generated with some java script code. I use firebug for a while years and never see something like this expect when I use mistake plugins or mistake server side generation. Also you can see page source.
I have created a simple print style sheet and what is happening is that when the text reaches the end of the first page, instead of flowing to the next page, like in word, the text seems to be splitting and half is on the first page and the next half is on the second page. Is there a way with css to correct this. I have done a grab to illustrate the problem, Thanks
css
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #ff0000; }
table { border: none; }
.noPrint { display:none; }
You can use the following to force a page break before a specific element:
#yourElementID {page-break-before:always;}
Edit:
I had assumed there was some other elements above your table, but looking again, you may just be printing reams and reams of table data? I am not sure how to solve this if that is the case.