CODEWITHSUNDEEP
htmlcss
user1694077
user1694077

Reputation:

Partially hide words in h1

I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.

<h1>First Last</h1>

I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.

Is there a way to do this with css? Preferably without fixed heights or widths?

http://jsfiddle.net/pnaL4/2/

Upvotes: 1

Views: 494

Answers (4)

Rafael Winterhalter
Rafael Winterhalter

Reputation: 44042

There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:

h1 {
   visibility: hidden;
}

h1:before {
    visibility: visible;
    content: "First";
}

Of course, this would require you to specify the showed content.

Upvotes: 2

Chris Laarman
Chris Laarman

Reputation: 1597

If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:

h1 {
    height: 30px;
    overflow: hidden;
}

Example

Upvotes: 1

ak85
ak85

Reputation: 4264

I ususally do something like

h1 {
  font-size: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 745px;

}

ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do 

text-overflow: inherit;

another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.

eg

<h1 title="First Last">First Last</h1>

Upvotes: 1

Nitesh
Nitesh

Reputation: 15769

Simple. Use a white-space:nowrap; CSS Property. 

h1 {
    white-space: nowrap;
}

This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.

Here is the WORKING DEMO to illustrate the issue.

Upvotes: 2

Related Questions