Главная » Языки программирования

Hide title text with css

Содержание
  1. Hide Page Titles From Displaying On Specific Pages & Posts Using CSS Code
  2. Hide Titles Using CSS
  3. Hiding Post Titles
  4. Hiding Multiple Specific Post Titles
  5. Reader Interactions
  6. Leave a Reply Cancel reply
  7. Primary Sidebar
  8. Hide Page Titles From Displaying On Specific Pages & Posts Using CSS Code
  9. Hide Titles Using CSS
  10. Hiding Post Titles
  11. Hiding Multiple Specific Post Titles
  12. Reader Interactions
  13. Leave a Reply Cancel reply
  14. Primary Sidebar
  15. Css css hide long text title
  16. How do i avoid this title from overflowing?
  17. How to Handle Text Overflow (With a CSS Ellipsis)
  18. Truncated a text with ellipsis that be next to a title
  19. Overflow: hidden and floating

Hide Page Titles From Displaying On Specific Pages & Posts Using CSS Code

The easiest way to hide the title of your page or post is to simply remove it after publishing.

You could then add the title at the top of the page/posts content area and use the Heading (H1) tags.

Your theme should also offer a field for your title which will still display in the search results as well as your source code.

Otherwise, install the Yoast’s SEO plugin and add your title to the General SEO Title field.

SEO Title

Another option is to add CSS code to your child theme’s style.css file.

Hide Titles Using CSS

This is an example of what the code looks like. Change the page I.D to match the page you wish to hide the title.

Add more unique page i.d’s to hide more page titles

.page-id-007 .entry-title .page-id-001 .entry-title

First you’ll need to find your:

  1. Page Title Class: Generally this is .entry-title for both pages and posts
  2. Page or Post I.D: You can find this in the source code by right clicking your mouse on the page you wish to hide.

Find Entry Title

Here’s a short tip written earlier about how to find your page i.d.

Highlight the title you want to hide and click Inspect with Firebug.

In the left window that pops up you’ll see both your:

Firebug displaying page I.D and Class

Hiding Post Titles

Edit this code and paste it into your child theme’s style.css file to hide a specific post title:

Hiding Multiple Specific Post Titles

Simply add each unique post i.d and title class tom the code:

#post-007 .entry-title, .page-id-001 .entry-title

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Источник

Hide Page Titles From Displaying On Specific Pages & Posts Using CSS Code

The easiest way to hide the title of your page or post is to simply remove it after publishing.

You could then add the title at the top of the page/posts content area and use the Heading (H1) tags.

Your theme should also offer a field for your title which will still display in the search results as well as your source code.

Otherwise, install the Yoast’s SEO plugin and add your title to the General SEO Title field.

SEO Title

Another option is to add CSS code to your child theme’s style.css file.

Hide Titles Using CSS

This is an example of what the code looks like. Change the page I.D to match the page you wish to hide the title.

Add more unique page i.d’s to hide more page titles

.page-id-007 .entry-title .page-id-001 .entry-title

First you’ll need to find your:

  1. Page Title Class: Generally this is .entry-title for both pages and posts
  2. Page or Post I.D: You can find this in the source code by right clicking your mouse on the page you wish to hide.

Find Entry Title

Here’s a short tip written earlier about how to find your page i.d.

Highlight the title you want to hide and click Inspect with Firebug.

In the left window that pops up you’ll see both your:

Firebug displaying page I.D and Class

Hiding Post Titles

Edit this code and paste it into your child theme’s style.css file to hide a specific post title:

Hiding Multiple Specific Post Titles

Simply add each unique post i.d and title class tom the code:

#post-007 .entry-title, .page-id-001 .entry-title

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Источник

Css css hide long text title

Text titles will share a baseline but not a top line. It is necessary to position the title element absolutely to get the alignment of the title text in line with the other two text lines (assuming that is required).

How do i avoid this title from overflowing?

Just playing around by creating a free wordpress theme but i’m stuck as the title of the post seems to overflow when its very long.

Please how can i fix this.

Here is the image showing the error.

The red border is the one that push down the container below it.

CSS
* < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >.posts-not-found < border: 2px solid red; padding: 20px; left: 65px; right: 65px; >.layerit < width: 100%; height: 100%; padding-top: 150px; margin: 0 auto; background: rgba(0, 0, 0, .3); padding-top: 150px; position: relative; left: 0; bottom: 0; right: 0; text-align: center; transition: background-color .9s ease; border: 1px solid white; >.navbar a < padding-top: 30px; >.navbar-brand < font-size: 25px; >.home-title < color: white; >#title-text <> .home-author < color: white; padding-top: 20px; padding-bottom: 20px; >.no-margin
HTML

Your gray area is created by top padding and the space the title and author text take up. When you have more than one line of text for either the title or author, the gray area will expand.

  1. Cut the title short with ellipsis, with CSS text-overflow: ellipsis; or WordPress wp_trim_words .
  2. Allow the text to move up and take up more of the gray space at the top of the gray area. Text titles will share a baseline but not a top line.

Here is an example of option #2:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .layerit < min-height: 300px; background: rgba(0, 0, 0, .3); border: 1px solid white; >.intro < position: absolute; left: 0; bottom: 0; right: 0; text-align: center; transition: background-color .9s ease; >.home-title < color: white; >.home-author < color: white; padding-top: 20px; padding-bottom: 20px; >.no-margin

 
Some really long title. Some really long title. Some really long title. Some really long title.
Normal title.

Normal title..

Notice that the the first letter of the text in the first column is pulled out of the column, this is because .row uses negative left/right margins.

You can use text-overflow: ellipsis property of CSS. This will keep truncate your text if it goes outside 100% width. But this will keep your text in one line only, just like this:

Have a look at the example snippet below:

* < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >.posts-not-found < border: 2px solid red; padding: 20px; left: 65px; right: 65px; >.layerit < width: 100%; height: 100%; padding-top: 150px; margin: 0 auto; background: rgba(0, 0, 0, .3); padding-top: 150px; position: relative; left: 0; bottom: 0; right: 0; text-align: center; transition: background-color .9s ease; border: 1px solid white; >.navbar a < padding-top: 30px; >.navbar-brand < font-size: 25px; >.home-title < color: white; >#title-text <> .home-author < color: white; padding-top: 20px; padding-bottom: 20px; >.no-margin < padding: 0; margin: 0; >#title-text

How to hide the text with css ellipsis and show all text when there is, overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. It works ok when you observe it in the large screen, you

How to Handle Text Overflow (With a CSS Ellipsis)

When a string of text overflows the boundaries of a container, to handle text overflow by Duration: 4:33

Truncated a text with ellipsis that be next to a title

I would like to have a summary next to a title and if the summary is too long, I would like it be truncated as classical ellipsis like that:

My Title This is a very long text that I want to.

I don’t want the width of the summary to be defined, I would like that it takes all the room on the same line. I tried to use overflow: hidden and text-overflow: ellipsis but I can not put the truncated text next to the title. If the text is next to the title, the summary is not truncated; if the text is truncated, it is not next to the title.

These are some of my attempts:

This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten shorten 
 
My Title 
This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten This is a very long text that I want to shorten
 
 
.title < white-space: nowrap; >.inline < display: inline; >.tiny < font-size: 70%; >.shortening

I’ve made a fiddle for you. Indeed, as Brian Glaz said in the comments, move the .shortening styles to the .title . Also, I added a wrapper around the text, so that it knows how much width it may take up.

If you have any questions left, let me know.

You need to set a width on shortening like width:200px; without a cutoff there is no reason to truncate the text.

CSS text-overflow Property, A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set

Overflow: hidden and floating

I am trying to add overflow: hidden and text-overflow: ellipsis to a title with an image floating to the left. Please see this fiddle:

 
   ×My very long title
Delivery time: 1 day
174,00 € img < float: left; margin-right: 1em; width: 100px; height: 100px; box-shadow: none; border:1px solid >.title

My issue is that the two text lines underneath (Delivery time and price) should be underneath the title, also to the right of the image. How can I do that?

EDIT: I only have access to the css, not the html.

[Note: some of the comments relate to an earlier version of this answer where I had mistakenly thought some change to the HTML would be possible. The revised answer given here is CSS only].

Using CSS grid we can define the grid areas that the four direct children of the li element are to occupy.

It is necessary to position the title element absolutely to get the alignment of the title text in line with the other two text lines (assuming that is required).

Obviously you’ll have to do some alterations to get the relative (and absolute) dimensions as you want them but this is a start:

li < width: 300px; display: grid; grid-template-areas: 'x x' 'title title' 'space dl' 'space span'; >img < margin-right: 1em; width: 100px; height: 100px; box-shadow: none; border: 1px solid; position: absolute; left: 0px; >li a:nth-child(1) < grid-area: x; >.title < grid-area: title; font-size: 18px; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; padding-left: 110px; position: absolute; >li a:first-child < grid-area: x; >.title < grid-area: title; >.variation < grid-area: variation; >.quantity < grid-area: quantity; >li
 
   ×My very long title
Delivery time: 1 day
174,00 €

I would approach it differently, try wrapping your data with flex and then using the flex to set the direction on each part.

 
   ×
Delivery time: 1 day174,00 €
 .flex-row < display: flex; flex-direction: row; >.flex-column

If I understood you correctly

Источник

Читайте также:  Checking internet connection in php
Оцените статью