How can I split a long word/url at a certain point when displaying it in a html div?
It should be like:
thisisareallylongwordt
hatneedstobebroken her
e or something like th
at.
if you are wanting the word to break at the edge of the div rather than to overflow it use
div {word-wrap:break-word}
You need to manually insert <br> tags:
thisisareallylongwordt<br>
hatneedstobebroken her<br>
e or something like th<br>
at
There is afaik no CSS solution as much as one would want one.
Edit: As Raoul suggested the soft-hyphen works too. Did not know that existed myself.
Do you want a static word wrap or something more dynamic as the size of the div changes? If you want the latter then you will probably want to use javascript. The jQuery library has a word-wrap plugin:
http://plugins.jquery.com/project/wordWrap
Dan
Related
I'm using a basic setup, but want to animate a
Heading
with slideInRight when one is to scroll down. Sorry, first-time using this and it has perked my interest, I've read the installation pages and the Basic Usage pages.
Thanks!
(EDIT) Hi all, It's appeared to me that my Question was not very accurate, and that I posted this before thinking. My issue that I have now resolved,was that I was attempting to make an entire div section move with 'bounce'. I've, with the awesome suggestion from #ThrowingDwarf I've been able to use a class="" and not an id="" tag. Thanks a ton guys! I hope this helps y'all in future!
As your question is not really clear i am assuming you have a normal CSS file with your markup etc. And you want to have another CSS file for your animations? This is possible, you can have multiple stylesheets. However you need to be careful with names. Do not duplicate names ie. using the same class/id in both files. It can be confusing and can have undesired effects.
To load the second CSS just do it the same way you load up the normal CSS.
Note: elements can have only one ID value but they can have multiple classes.
I've started using LESS recently and it's really convenient, and I have a question: as it's really convenient to place element inside the brackets to clarify the style structure, in .CSS file that's being generated I end up seeing things like this:
#second-block .side-menu #category .content{...}
Is this okay to have id elements inside other id elements, even though I use LESS?
Yes. It's ok to have id element inside other id elements.
The generated .css will work.
Personally, I like to use as few id elements in my code as possible. The reasoning behind this, is how some browsers don't like it when you have multiple instances of the same id on the page. I find that using classes is more flexible.
Here's a relevant stack overflow question that mentions on ids vs. classes:
Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed 9 years ago.
I would like to replace a text say 'company name' in my project. The use-case is to produce documents (after pre-processing) for different companies only by maintaining a different stylesheet for different company.
SEO not much of the importance here.
I am using this approach:
html
<span class="company-name"> YourCompanyName </span>
css
.company-name{font-size: 0}
.company-name:after{
content: "New Company Name";
font-size: 14px;
}
and here is the jsFiddle http://jsfiddle.net/cN9gZ/
so here is my quick question: Is there any better way of doing the same thing, using css only?
If you really need to do such things in CSS, the following is a little more logical and a little less risky (with the Usual CSS Caveats in mind):
<style>
.company-name:after{
content: "New Company Name";
}
</style>
<span class="company-name"></span>
That is, use an element with empty content, so you don’t need any trick to hide the dummy content.
CSS really isn't designed for this kind of thing. You'd be better off using Javascript, or even better, just altering the HTML code itself.
There really isn't any other way to do what you're asking in CSS other than the way you've done it: The content property isn't available in most CSS styles, because CSS isn't intended for placing content.
Is there any better way of doing the same thing, using css only?
No. Every other effect would basically result in the same method used: hide the original content and replace it with a pseudo-element (::after or ::before).
Note that search engines are likely to ignore the stylesheet, which could result in some strange search results. It's almost always a better idea to replace fixed content in the markup instead. In almost all cases it will take only a simple find-and-replace. JavaScript and CSS can be deactivated - markup can't.
I'd like to show a title with the first three characters in different color.
I know this can be done with <h2><span>The</span> awsome title</h2> but I was wondering if there is some kind of "nth-child" property that can be applied to characters inside an element.
I'd like to avoid breaking the text by inserting other elements ( etc.)
A (relatively) crossbrowser solution would be welcome.
There is no cleaner way than what you already have.
<h2><span>The</span> awesome title</h2>
With CSS:
h2 {
color: red
}
h2 span {
color: blue
}
There's :first-letter and :first-line, but no :first-word.
I imagine the reason for this is that it's hard to define exactly what a "word" should be.
The only way to do it without changing your markup is to use JavaScript to enclose the first word with a <span> (and style it the same way), but I would only recommend that if the rest of your site already heavily relies on JavaScript to function.
Yep, JavaScript is the only way I can think of (as everyone else has already said!). Demo here.
$(function() {
$('h2').each(function(){
$(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
});
});
This isn't possible with the current CSS operators you are talking about nth-whatever,
This could however be done with JavaScript... if of course you want to go down that route, the best way to do it would be with <span> tags as then you will have no problems with people who have disabled JS.
It is entirely up to you, but if I were in your position I would just man up and use JS, it is called progressive enhancement and unobtrusive JS, as long as the content is not wrecked if the user disables JS it is acceptable, see here:
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
Sadly, there isn't a way to do this with stylesheets. CSS3 provides us with first-letter and first-line, but not first-word, and certainly not first-n-letters.
See also the answers to this question for more: CSS to increase size of first word
JQuery does implement a first-word selector, so if you're prepared to go with the Javascript option, you may be able to do it.
Heh. It seems that JQuery doesn't actually implement it after all. I must have been using a plugin when I saw it.
But here's a link to a Javascript solution that might help: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
Due to mod rights on a site, I can only add css (no js etc...). When users input text in a comment box, it saves it and then displays it as a <p>. is there any way through css i can search for a specific word in the <p> tag and remove/censor it?
Thanks
There is no practical solution for that ( You may be able to select elements based on the value and hide them in CSS3 but it wouldn't be cross-browser friendly, if at all possible ). I'm afraid you'll have to use JS/server-side for a real solution.
On the hacky side of things and for IE only, you may be able to use an expression and display:none elements which contain certain strings in their nodeValue, it wouldn't work for modern browsers.
If parent element in this case input field has class or id you can hide elements inside like this
textarea#mytextarea p
display:none;
}
Once upon a time, there was a pseudo-class :contains() in the wonderful spec of CSS3 selectors ... but it disappeared early and afaik well before any implementation.
A JS solution has one problem: search bots and any user without JS (or displaying the source code) will see the f***ing original text :)