CODEWITHSUNDEEP
javascriptjquerycss
Eddy
Eddy

Reputation: 71

add styling of text to function

I'm using the code below to add a line break at a defined point. Is there a way to also add code to style the text after the line break?

 $('h3').html(function(i, h) {
    return h.replace('Photo Course', '<br />Photo Course');
 });

Upvotes: 2

Views: 103

Answers (5)

arhak
arhak

Reputation: 2542

you can differentiate :first-line

 $('h3').html(function(i, h) {
    return h.replace('Photo Course', '<br />Photo Course');
 });
h3:first-line {
  font-size: initial;
  color: initial;
  font-style: initial;
  font-variant: small-caps;
}
h3 {
  font-size: 0.75em;
  color: gray;
  font-style: italic;
  font-variant: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<h3>This is a title Photo Course of whatever I wanna here to be long enough</h3>

Upvotes: 1

Mike B
Mike B

Reputation: 2776

After reading the extra I don't want to delete previous answer cause it can help someone else.
To style everything except break, you should give id or class to the break.

$('h3').html(function(i, h) {
    return h.replace('Photo Course', '<br class="dont_style" /><span id="to_style">Photo Course</span>');
 });

And then style br separately

h3 {
   font-size: 20px;
}
.dont_style {
   font-size: 12px;
}

Upvotes: 0

hackerrdave
hackerrdave

Reputation: 6706

You could add inline styles to the code after the line break like this:

$('h3').html(function(i, h) {
  return h.replace('Photo Course', '<br /><span style="color:red">Photo Course</span>');
});

Upvotes: 2

Mike B
Mike B

Reputation: 2776

Yes, you can use css fn - $(element).css(property, value)?
like $('h3').css('font-size', '20px').
Or if you want to style without the break, you can wrap it inside a span and style that. 

$('h3').html(function(i, h) {
    return h.replace('Photo Course', '<br /><span id="to_style">Photo Course</span>');
 }); 
$("#to_style").css("color", "red");

Or you can add class to that span and have the style ready in the css. 

 return h.replace('Photo Course', '<br /><span class="to_style">Photo Course</span>');

.

.to_style {
   color: red;
}

Upvotes: 0

edlee
edlee

Reputation: 675

You could wrap it in a span. '<br /><span>Photo Course</span>'.

Then in the css stylesheet add something like h3 span {color:green}

Upvotes: 0

Related Questions