Css hiding part of text

Hide/show a part of text using only Javascript (jQuery) and CSS

I have a div which contains long text. I’d like to make sure that after loading the page my div will show first few words and after click on it, it will expand and show whole long text. How can I make it in Javascript or jQuery and CSS? I know names of classes, id etc. but I don’t have access to html file so I can’t write additional code inside html file. Thank you for help!

7 Answers 7

Expand div via CSS overflow

One way of doing this is to write css where you set a height on your div and set the overflow to hidden .

After a click on the div , the overflow can be set to visible :

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla hendrerit, molestie dui at, ultrices sapien.
 

Expand and hide div via CSS overflow and JQuery’s toggleClass

If you want to show and hide the text when clicking on the div , you can use the same css overflow strategy and toggle the class in JQuery like so:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla hendrerit, molestie dui at, ultrices sapien.
 

.container < height: 1.5rem; overflow: hidden; >.container:hover < cursor: pointer; >.expand

Animate in a child div via JQuery’s slideDown

If you want to animate it, you can show and hide the text you want to expand. I used a div for the additional expanded text so it is forced onto the next line (this is more responsive friendly):

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis eu massa dictum rutrum ac et massa. Morbi ante ante, faucibus non varius ut, sollicitudin blandit libero. 
Nam magna elit, molestie et nulla in, aliquam sagittis enim. Donec eget nulla hendrerit, molestie dui at, ultrices sapien. In iaculis nunc sapien, sit amet iaculis velit viverra in. Proin in massa magna. Nullam volutpat.
 
 

$(document).ready(function() < $(".container").click(function() < if ($("#more").is(":hidden")) < $("#more").slideDown("fast"); >else < $("#more").hide(); >>); >); 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed leo urna. Fusce varius turpis non elit interdum, quis consectetur neque sollicitudin. Suspendisse ipsum mauris, posuere quis est ac, hendrerit iaculis mauris. In ultrices volutpat rhoncus. Suspendisse semper velit libero, ut consequat erat elementum non. Nullam eu imperdiet quam. Quisque ullamcorper molestie vehicula. Praesent non tellus cursus, cursus urna a, feugiat justo. Sed sit amet efficitur quam. Morbi enim urna, varius eget sodales quis, gravida eu lacus. Donec dignissim dapibus cursus. Donec vulputate lacus purus, porttitor tincidunt velit eleifend ac. Praesent vestibulum lectus quis maximus gravida. Donec et lorem eu arcu volutpat maximus. Proin nulla nibh, blandit a hendrerit at, condimentum vel libero.

Источник

CSS hide part of text in html using css

The following tutorial shows you how to use CSS to do «CSS hide part of text in html using css».

CSS Style

The CSS style to do «CSS hide part of text in html using css» is

#field-dishe < position:relative; > #field-dishe:before < position:absolute; width:35px; top:0; bottom:0; z-index:2; background:white; content:" " >

HTML Body

body> something before div id="field-dishe" >"readonly_label"> 5000   . ? . Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Wine br> 5001   . Rendang Chicken br>   

The following iframe shows the result. You can view the full source code and open it in another tab.

!-- w w w .d e m o 2 s . c o m --> http://jsbin.com Released under the MIT license: http://jsbin.mit-license.org --> html> head> style> #field-dishe< position: relative; > #field-dishe:before < position: absolute; width: 35px; top:0; bottom:0; z-index:2; background: white; content:" " >  body> something before div id="field-dishe" >"readonly_label"> 5000   . ? . Pork Trotters in Sweetened Vinegar Or Chicken Stewed in Rice Winebr> 5001   . Rendang Chickenbr>    

Related

• CSS Hidden text over iFrame
• CSS Hide all text except for the first letter with CSS
• CSS Hide only text in html paragraph
• CSS hide part of text in html using css
• CSS Hide some text through CSS
• CSS Hide specific text using just CSS
• CSS Hide text by degrading like Google play does

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

How do I only display part of a string using css

I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I’d like to append ‘. ‘ to the end. For example, if I have the string:

An exact character count is difficult/impossible, but you can certainly restrict it to a width: stackoverflow.com/questions/15124838/…

Character counts wont work with CSS. As Tim mentioned, your solution would have to be width based. Here’s a simple solution: jsfiddle.net/8atfj

7 Answers 7

Unfortunately there isn’t a good cross browser way to do this using only CSS. ‘text-overflow’ relies on the width of the string, and not the length of string as you need.

You can use the .length property of strings in javascript to achieve this

function ellipsify (str) < if (str.length >10) < return (str.substring(0, 10) + ". "); >else < return str; >> 

Firefox does in fact now support this, you just need to ensure that whatever you are trying to ‘truncate’ has block level formatting and a width — which could be the parent.

Without using any serverside script or javascript you can not do this.

function LimitCharacter($data,$limit = 20) < if (strlen($data) >$limit) < $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '. '; return $data; >else < return $data; >> 

call it as LimitCharacter($yourString,5);

var str = 'Some very long string'; if(str.length > 10) str = str.substring(0,10)+". "; 

it´s called ellipsis and you can use it on a block element.

However it does not work in Firefox and you cannot set the width to exactly 10 characters as you cannot specify the width in characters in css.

If you want exactly 10 characters and Firefox compatibility you will have to use javascript or a server-side solution.

Источник

Hide Text with CSS, Best Practice?

The #web-title would be styled with background:url(http://website.com/logohere.png) , but how to properly hide the text Website Name ? As seen here: Hide text using css or here https://stackoverflow.com/a/2705328 , I’ve seen various methods to hide the text, such as:

I’ve also seen some combine those three methods. But actually which one is the best practice to hide text effectively?

Not constructive: As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion.

Ain’t no smart ass, but can’t you just put an image tag instead? I’m just a practical person who doesn’t like ugly ad-hoc solutions. maybe I’m wrong

Here’s a list of most image replacement techniques, their pros and cons: css-tricks.com/examples/ImageReplacement

12 Answers 12

Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

It is accessible, an has better performance than -99999px.

Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.

@Danger14 Can’t remember, but since it was posted on Zeldman’s site, a bunch of people must have been commenting on it on blogs, and Twitter.

you can simply make it transparent

+1 this works great if you have a link that you need to still be active. I used this to get rid of numbers on an old image slider and the links work fine.

This is the solution that ended up working for my needs. I have a button which has a graphic via the css background-image property and on mobile devices I wanted to collapse the button down and hide the text.

Can’t you use simply display: none; like this

Or how about playing with visibility if you are concerned to reserve the space

Display:none has very bad implications for people using screen readers. It’s a big accessibility no-no.

@Mr.Alien: I believe it’s because screen readers that respect CSS will plain skip over the undisplayed elements. You don’t want this to happen for headings. Basically, you want to hide the text from not-screen-readers only.

but what’s the use of reading a text which actually you want to hide, and if you really want that it should be readed out than why to hide? and where this user has said that he wants a reader compatible solution?

He didn’t say he wants screen readers, but he asked what’s best practice. Providing good accessibility is the proper way of doing things. Imagine he devastating it would be for screen readers if you did this to your logo and menu items.

@Mr.Alien The logo would be replacing the text showing the name of your site. There is a reason that’s usually placed first on a page. Most people want to know in what site they are.

the way most developers will do is:

I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.

you ensure that the text still is readable.

That is bloody brilliant. Was stuck on a problem where i wanted to hide some parts of the ajax file uploader, such as the dropzone and some text in StatusContainer. This little hack did the trick.

Add .hide-text class to your span that has the text

or make the text transparent

use according to your use case.

As others have said, display: none has a very bad implication for screen reader. stackoverflow.com/a/12783474/651170

If you’re willing to accomodate this in your markup (as you are in your question with the holding the text), I’d go with whatever jQuery UI went with in their CSS helpers:

The image replacement techniques are good if you absolutely refuse to add extra markup for the text to be hidden in the container for the image.

What Google(search bot) needs is same content should be served to bot as it is served to user. Indenting text away (any text) gets bot to think it is a spam or you are serving different content to user and bot.

The best method is to directly use logo as an image inside your anchor tag. Give an ‘alt’ to your image. This will be perfect for bot to read & also will help in image searching.

Источник

Hiding text in an element

Is there a way I can hide the text directly inside #view-item-hero-info ? I know I can use text-indent but is there another, nicer, way? Note: I don’t want to hide the element, just everything inside it. Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * < display: none >but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.

6 Answers 6

color: transparent; does not work in some browsers. Some browsers when encountering color: transparent use color:white instead, especially for links. So I use font-size: 0.1px

hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:

you can use this code if u need hide text

to hide all direct child’s use

if you need all child’s use last code but change class to

Use css display property. In HTML this would look like

Using javascript: document.getElementById(«view-item-hero-header-score»).style.display=»none»

Using CSS you can set a style:

So to hide all descendants (*) within your element:

If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)

Rather than selecting all (*) you can select particular descendants eg divs:

Equally instead of the visibility you can use:

The display option doesn’t take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option

EDIT: There isn’t a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.

As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.

Источник