Restrict content in a div to two lines only

up vote
-1
down vote

favorite

I have large text as in attached image

before applying CSS

Before Applying CSS

As per requirment , need to restrict showing data to two lines only . For that I am using below css code

     { display: -webkit-box;

        margin: 0 auto;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space : normal;

        width : 100%

}

     After Applying Above CSS

After Applying above CSS

But client is asking for output as below

Expecting ..

Expected

Please someone help on this

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

Your statement is unclear, it looks like your container width is not long enough?
– Sing
Nov 20 at 7:14

Could you please explain the difference between the output you got and the client requirement. Apart from the extra ellipsis.
– vssadineni
Nov 20 at 10:00

Please be careful because -webkit-line-clamp, -webkit-box-orient won't work in firefox and others. see caniuse.com/#feat=css-line-clamp
– Mihai T
Nov 20 at 13:17

Question has been modified , please help
– Swamy
Nov 21 at 9:13

Using ellipsis to "dot out" text only works for single lines.
– connexo
Nov 21 at 11:15

|
show 1 more comment

up vote
-1
down vote

favorite

I have large text as in attached image

before applying CSS

Before Applying CSS

As per requirment , need to restrict showing data to two lines only . For that I am using below css code

     { display: -webkit-box;

        margin: 0 auto;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space : normal;

        width : 100%

}

     After Applying Above CSS

After Applying above CSS

But client is asking for output as below

Expecting ..

Expected

Please someone help on this

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

Your statement is unclear, it looks like your container width is not long enough?
– Sing
Nov 20 at 7:14

Could you please explain the difference between the output you got and the client requirement. Apart from the extra ellipsis.
– vssadineni
Nov 20 at 10:00

Please be careful because -webkit-line-clamp, -webkit-box-orient won't work in firefox and others. see caniuse.com/#feat=css-line-clamp
– Mihai T
Nov 20 at 13:17

Question has been modified , please help
– Swamy
Nov 21 at 9:13

Using ellipsis to "dot out" text only works for single lines.
– connexo
Nov 21 at 11:15

|
show 1 more comment

up vote
-1
down vote

favorite

I have large text as in attached image

before applying CSS

Before Applying CSS

As per requirment , need to restrict showing data to two lines only . For that I am using below css code

     { display: -webkit-box;

        margin: 0 auto;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space : normal;

        width : 100%

}

     After Applying Above CSS

After Applying above CSS

But client is asking for output as below

Expecting ..

Expected

Please someone help on this

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

I have large text as in attached image

before applying CSS

Before Applying CSS

As per requirment , need to restrict showing data to two lines only . For that I am using below css code

     { display: -webkit-box;

        margin: 0 auto;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space : normal;

        width : 100%

}

     After Applying Above CSS

After Applying above CSS

But client is asking for output as below

Expecting ..

Expected

Please someone help on this

javascript html5 css3

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

edited Nov 21 at 11:11

asked Nov 20 at 6:09

Swamy

1817

asked Nov 20 at 6:09

Swamy

1817

asked Nov 20 at 6:09

Swamy

1817

Your statement is unclear, it looks like your container width is not long enough?
– Sing
Nov 20 at 7:14

Could you please explain the difference between the output you got and the client requirement. Apart from the extra ellipsis.
– vssadineni
Nov 20 at 10:00

Please be careful because -webkit-line-clamp, -webkit-box-orient won't work in firefox and others. see caniuse.com/#feat=css-line-clamp
– Mihai T
Nov 20 at 13:17

Question has been modified , please help
– Swamy
Nov 21 at 9:13

Using ellipsis to "dot out" text only works for single lines.
– connexo
Nov 21 at 11:15

|
show 1 more comment

Your statement is unclear, it looks like your container width is not long enough?
– Sing
Nov 20 at 7:14

Could you please explain the difference between the output you got and the client requirement. Apart from the extra ellipsis.
– vssadineni
Nov 20 at 10:00

Please be careful because -webkit-line-clamp, -webkit-box-orient won't work in firefox and others. see caniuse.com/#feat=css-line-clamp
– Mihai T
Nov 20 at 13:17

Question has been modified , please help
– Swamy
Nov 21 at 9:13

Using ellipsis to "dot out" text only works for single lines.
– connexo
Nov 21 at 11:15

Your statement is unclear, it looks like your container width is not long enough?
– Sing
Nov 20 at 7:14

Could you please explain the difference between the output you got and the client requirement. Apart from the extra ellipsis.
– vssadineni
Nov 20 at 10:00

Please be careful because -webkit-line-clamp, -webkit-box-orient won't work in firefox and others. see caniuse.com/#feat=css-line-clamp
– Mihai T
Nov 20 at 13:17

Question has been modified , please help
– Swamy
Nov 21 at 9:13

Using ellipsis to "dot out" text only works for single lines.
– connexo
Nov 21 at 11:15

|
show 1 more comment

1 Answer
1

active

oldest

votes

up vote
0
down vote

Your code is ok.
you will have to define width as you need.

{  

 display:-webkit-box;

 -webkit-line-clamp:3;

 -webkit-box-orient:vertical;  

 overflow: hidden;

 width: 160px;

}

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387188%2frestrict-content-in-a-div-to-two-lines-only%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

Your code is ok.
you will have to define width as you need.

{  

 display:-webkit-box;

 -webkit-line-clamp:3;

 -webkit-box-orient:vertical;  

 overflow: hidden;

 width: 160px;

}

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

add a comment |

up vote
0
down vote

Your code is ok.
you will have to define width as you need.

{  

 display:-webkit-box;

 -webkit-line-clamp:3;

 -webkit-box-orient:vertical;  

 overflow: hidden;

 width: 160px;

}

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

add a comment |

up vote
0
down vote

Your code is ok.
you will have to define width as you need.

{  

 display:-webkit-box;

 -webkit-line-clamp:3;

 -webkit-box-orient:vertical;  

 overflow: hidden;

 width: 160px;

}

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

Your code is ok.
you will have to define width as you need.

{  

 display:-webkit-box;

 -webkit-line-clamp:3;

 -webkit-box-orient:vertical;  

 overflow: hidden;

 width: 160px;

}

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

edited Nov 21 at 7:42

answered Nov 20 at 7:19

Ashu

answered Nov 20 at 7:19

Ashu

answered Nov 20 at 7:19

Ashu

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut