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 ...
Related
I added ellipsis for the long text in CSS but it is showing just ...
No Text is showing.
For example, say this is my long text: “I Got a Degree but Ended Up Selling Charcoal To Survive”
Now after adding the ellipsis, I was expecting my text to be something like this: “I Got a Degree but End...
See screenshot below:
But after adding the ellipsis, I saw just ...
See screenshot below:
See my CSS code below:
.breadcrumb, .rank-math-breadcrumb {
text-transform: uppercase !important;
margin-bottom: 24px !important;
margin-bottom: 24px !important;
display:inline-block !important;
width: calc(80%);
}
.breadcrumb, .rank-math-breadcrumb p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
PLEASE NOTE: I inspected the web page on chrome with (Right click → inspect). I am using WordPress
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 made a css example. The main parts where I am facing problems are:
#sign
{
font-size: xx-large;
color:white;
background-color:blue;
font-weight:bolder;
text-align: right;
position:right;
}
and I am implementing it like:
<div id="sign">Me and Me</div>
Here the background color is displayed like a band. Now I want the background color to be limited to only the text area "Me and Me". What modifications do I have to do to acheive this?
Is there a reason that you can't just set the background for whichever elements you want styled?
Using this link you can see that what you need is a display: inline; call. I wrote up a quick jsFiddle for you to look at, this should be what you want...
http://jsfiddle.net/NjAUR/
Seeing that you want it on the right hand side, get rid of the position: right declaration, and use a float: right. Here is the updated version...
http://jsfiddle.net/NjAUR/1/
Use display:inline; with your css. And if you need that in right side use float:right also.
See the Demo
Okay here I wrapped the "Me and Me" text inside a span. Removed background-color property of #sign and added it to the span.
HTML
<div id="sign"><span>Me and Me</span></div>
CSS
#sign
{
font-size: xx-large;
color:white;
font-weight:bolder;
text-align: right;
position:right;
}
#sign span { background-color:green; } /* or any color of your choice */
Demo link
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d
Lets say I have a header banner on a webpage I'm about to print. Instead of wasting someone's ink printing the entire block of the image, is there a way via css to replace the image with text of H1 size?
I usually just add the following to my style sheet:
.nodisplay
{
display: none;
}
#media print {
* {
background-color: white !important;
background-image: none !important;
}
.noprint
{
display: none;
}
}
And then assign the noprint class to elements which shouldn't be printed:
<div class="noprint">
</div>
And for your example, something like the following should work:
<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>
You could put an h1 element and an image in the same place in the source, and have the image CSS display:none for print media, and have the h1 set to display:none for screen media.
Bryan, typically on things like logos I use image replacement for the graphic anyway so the logo itself is really in an H1 tag. Then in my print style sheet. I do something like this...
h1#logo a, h1#home-logo{
text-indent: 0 !important;
background-image: none !important;
font-size: 1.2em !important;
display: block !important;
height: 1em !important;
width: 100% !important;
text-decoration: none !important;
color: black !important;
}
Which removes the image replacement and shows the text. Make sure of course that you call this stylesheet separately using media="print".
Adding to Adam's solution: If your text is fixed ("head banner was there" not "ad for such and such was there"), you can use :before or :after pseudo-elements to insert text instead of having the text pre-inserted in the HTML.
I makes your HTML lighter if you are replacing many images with the same text.
I have to say that I dislike this CSS feature, but it is there if you want to use it.