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;
}
Related
Actually whenever there are two lines in title, it gets very close, which makes it hard to read. So can anyone tell custom CSS that I add for space in between H1 tag in Tittle?
You can change your H1 tag in your css to have a larger line height
h1 { line-height: 20px; }
Using line-height
.page-title {
line-height: 40px;
margin-bottom: 20px;
}
<h1 class="page-title">Very Very Very Very Very Long Long Long Long Page Title</h1>
Adjusting the line height should fix that
h1 {
line-height: 1.4;
}
Try to work with padding. Padding basically let's you put in some extra pixels in the wanted direction. So for instance: for your title to stay in position on your screen, add 5 px of padding-bottom.
looks like this
padding-bottom: 5px;
...or whatever amount of space you want in there but this is basically how you do it.
As per your template Link you provide at comment, You are talking about this line,
"Use Of Computer Increases To Keep The Record"
Solution:
First open style.css, then got to line 2535 or find,
article.post.hentry h1.entry-title, article.post.hentry h2.entry-title {
line-height: 26px;
margin-bottom: 10px;
Increase line-height property 26 to 36 line-height: 36px;.(increase as it looks goods to you)
This was before
This is after
It's worked for me, Let's take another try,
Try using this line-height: 36px!important;
I am working out of wordpress. I have tried using inspect element to move a line of text that is basically overlapping another line of text in the ecwid plugin.
It does not seem to work, every time I edit the css code by using margins or padding attributes nothing happens
On my page where it says $205 for the product , was $295 is touching it and I want to separate that from the actual price.
How can I achieve this?
I have tried using this code
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
padding-bottom: 5px;
}
here is a look at exactly what im reffering to
https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0
Add a line height like this:
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
font-size: 24px;
font-weight: 400;
color: #a20505;
white-space: nowrap;
line-height: 21px;
}
Both of your prices are included inside the same div. When you have text that wraps, the only way to separate them is to define a height between the lines.
To fix your checkout problem fix the line-height there as well on this class:
.hentry table, #comments table {
margin-bottom: 1em;
font-size: 80%;
line-height: 21px;
}
If you want to fix this problem in one single CSS set of instructions do this instead:
.hentry table, #comments table, .ecwid-productBrowser-price {
line-height: 21px;
}
The issue is that it is a span element, which does not really accept margin / padding well.
The element in question is this:
html#ecwid_html body#ecwid_body .ecwid span
So, to make it have space above it, you can add this style to the stylesheet (at the end):
html#ecwid_html body#ecwid_body .ecwid span {
display: inline-block;
padding-top: 15px;
}
Adjust the padding-top to suite your desired layout.
Alternatively, you could do this by increasing the line-height of the element (in which case it does not need to be display: inline-block):
html#ecwid_html body#ecwid_body .ecwid span {
line-height: 2.5em;
}
It is a span element, to make padding active, you need to add :
{
display :inline-block;
}
You can set padding for "was" element.
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container {
padding-bottom:5px;
}
(Ecwid team here)
While the answers here can help to fix the issues yourself, we will investigate how Ecwid works with your "DMS" theme and make sure to fix those on our side. The issue is already in our devs queue, we will roll out the solution in one of the Ecwid plugin updates in the near future.
I have these div's on my site and they contain text which is sometimes too wide to fit the h4 elements within.
Right now I've applied these styles to this particular h4:
h4 {
font: {
family: "Nexa";
size: 3.25em;
weight: 600;
}
line-height: 135%;
letter-spacing: 0.15rem;
text-transform: uppercase;
}
I'm using the em measurement to change its' size. Is there a more appropriate measurement for this situation?
EDIT EXPLAINING HOW MY QUESTION IS NOT A DUPLICATE: Using the viewport unit of measurement will not help in my situation considering my styles are interdependent. I've tried it to confirm.
You can try out this:
h4 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
And you need to set the language in a ancestral HTML element:
<article attr1="valor" attr2="valor" ... lang="en">
or
<html attr1="valor" attr2="valor" ... lang="en">
See more:
Css Tricks
I've decided to use an if ... in conditional to check an array of problematic titles. This array contains titles that don't fit the container properly. If the site is in the array of those titles I apply a class called smaller to the h4 containing the problematic title. I don't know if this was the best approach but it's solved the problem. Thanks to everyone who offered help!
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;
}
I have some of my post titles quite long and when viewed on my mobile phone, the long title text gets cut at the end of the screen width like it disappears in.
What I want to do is for long title text to continue on a new line rather than a section of it disappearing.
I have tried the following but not working:
.vtitle {
word-wrap: break-word;
word-break:break-all;
white-space: nowrap;
}
CSS:
.vtitle {
font: Normal 34px 'Tulpen One', Dosis, sans-serif !important;
padding-top: 12px;
word-break: normal !important;
}
I fixed the issue myself and thanks to those that responded. The fix to this was simply using the white space like this:
.vtitle {
white-space: normal !important;
}
Adding the !important forced the custom css to override the default one.
Try this:
.vtitle {
word-break:break-word;
}
Fiddle here.
Well, wanted to try it on a fiddle, but it seems like it works :
http://jsfiddle.net/n7UTK/3/
HTML:
<div class="title">
<h1>A long title in a tiny place.</h1>
</div>
CSS:
.title
{
width : 100px;
}
And it also works on my mobile phone ...