How to Hide Too Long Texts in Div Elements

Long text should be hidden by css

use text-overflow:clip; and width to h3

h3 {    white-space: nowrap;    overflow: hidden;    text-overflow: clip;    width: 59px;}

<div>    <h3>Sometext</h3></div>

How to hide long text in responsive div?

Add overflow: hidden; to .box_body. And to create some "padding" there so that the overflow point isn't up against the edge of the parent, limit that element's height with max-height: calc(100% - 15px);

.contents {  text-align: center;  margin-bottom: 15px !important;}
.instagram {  background-image: url("https://snd-assets.s3.amazonaws.com/icons/flat/instagram.png");}
.logos.logos-lg {  background-size: 120px auto;  height: 120px;  width: 120px;}
.logos {  margin: 0 auto 15px;  background-position: 1px 1px;  background-repeat: no-repeat;  display: block;}
.box_panel {  width: 100%;  height: 132px;  border: 1px solid #ddd;  border-radius: 4px;  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}
.box_icon {  float: left;  background-color: #f5f5f5;  border-right: 1px solid #ddd;  margin: 0px 15px 0px 0px;  border-top-left-radius: 4px;  border-bottom-left-radius: 4px;}
.box_icon .logos {  margin: 5px auto !important;}
.box_body {  padding: 15px;  text-align: left;  overflow: hidden;  max-height: calc(100% - 15px);}
.box_body h4 {  font-weight: bold;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">    <div class="box_panel">        <div class="box_icon">            <div class="logos logos-lg instagram"></div>        </div>        <div class="box_body">            <h4>Title</h4>            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.        </div>    </div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">    <div class="box_panel">        <div class="box_icon">            <div class="logos logos-lg instagram"></div>        </div>        <div class="box_body">            <h4>Title</h4>            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.        </div>    </div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">    <div class="box_panel">        <div class="box_icon">            <div class="logos logos-lg instagram"></div>        </div>        <div class="box_body">            <h4>Title</h4>            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.        </div>    </div></div><div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 contents">    <div class="box_panel">        <div class="box_icon">            <div class="logos logos-lg instagram"></div>        </div>        <div class="box_body">            <h4>Title</h4>            Some Text long text description goes here in the body of the panel box, just a filler for the real content that will stay here once this goes to live.        </div>    </div></div>

crop text too long inside div

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

This is one possible approach i can think of

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

This way the long text will still wrap but will not be visible due to overflow set, and by setting line-height same as height we are making sure only one line will ever be displayed.

See demo here and nice overflow property description with interactive examples.

Hide text going beyond DIV element

You can do this with CSS.

Is there anyway to make text going beyond the boundary invisible?

Yep: overflow

#yourDivId {
    overflow: hidden;
}

Is it possible to break it into multiple lines

Yep: word-wrap

#yourDivId {
    word-wrap: break-word;
}

Hide text when resize a div vertically

You can use overflow:hidden; css property on the container.

.container{
   overflow:hidden;
}

example

.container {
  width: 300px;
  background: orange;
  padding: 10px;
  margin: 20px auto;
}

.container.overflow-h {
  width: 300px;
  height: 50px;
  background: orange;
  overflow: hidden;
  padding: 10px;
  margin: 20px auto;
}

<div class="container overflow-h">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Adding ... when text is too long in a div with only CSS

You can use text-overflow: ellipsis for that. Further information is in the comments of the code.

div {  width: 10em; /* the element needs a fixed width (in px, em, %, etc) */  overflow: hidden; /* make sure it hides the content that overflows */  white-space: nowrap; /* don't break the line */  text-overflow: ellipsis; /* give the beautiful '...' effect */}

<div>This is a text that is too long for this div.</div>

Hide text if it doesn't fit in one line with CSS

Place your text in an inline-block inner-wrapper with white-space: nowrap to prevent line breaks.
Insert an empty inline-block pseudo-element before that inner-wrapper.
When the inner-wrapper is wider than the outer-wrapper, it will be moved to the second line of the outer-wrapper.
To hide it use overflow: hidden, and set the same value to height and line-height.

.outer-wrapper {  overflow: hidden;  height: 1.2em;  line-height: 1.2em;  border: 1px dotted black;  margin: 1em;}.outer-wrapper::before {  content: '';  display: inline-block;}.inner-wrapper {  display: inline-block;  white-space: nowrap;}

<div class="outer-wrapper">  <div class="inner-wrapper">    this is a short line  </div></div><div class="outer-wrapper">  <div class="inner-wrapper">    this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line!  </div></div>

how can i hide long text from center with dot (eg: Like myfile...n.jpg)

Css Solution.

I have used simple data-attribute with text-overflow: ellipsis; to achieve the effect you need.

Here is the snippet:

#Dname {  position: relative;  width: 57px;}
#Dname p {  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}
#Dname:after {  content: attr(data-filetype);  position: absolute;  left: 100%;  top: 0;}

<div id="Dname" data-filetype="t.pdf">  <p>digital document.pdf</p></div>

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}