উপচে পড়া: শেষে লুকানো বিন্দু

Question

ধরা যাক আমার কাছে একটি স্ট্রিং রয়েছে " আমি বড় বোতাম পছন্দ করি এবং আমি মিথ্যা বলতে পারি না " এবং আমি এটি দিয়ে কাটতাম overflow:hidden, সুতরাং এটি এর মতো কিছু প্রদর্শন করে:

আমি বড় বাট পছন্দ করি এবং আমি ক্যান না

পাঠ্য কেটে ফেলা এটি কি এভাবে প্রকাশ করা সম্ভব:

আমি বড় বাট পছন্দ করি এবং আমি ক্যান ...

সিএসএস ব্যবহার করছেন?

Comments

এই প্রশ্নটি কি গানের প্রচারের জন্য একটি ব্যবহার?

— সিরিল গুপ্ত

দেরী সাড়া দেওয়ার জন্য @ ক্যারিলগুপ্ত দুঃখিত আমাকে বাথরুমে ছুটে যেতে হয়েছিল। আপনার প্রশ্নের উত্তর দিতে ... হ্যাঁ

— জো ফিলিপস

সম্ভাব্য সদৃশ আমি গোপন ওভারফ্লো সঙ্গে একটি স্প্যান মধ্যে বিন্দু ( "...") কীভাবে দেখাতে পারি?

— টার্মিনিনজা

Answer 1

আপনি পাঠ্য-ওভারফ্লো ব্যবহার করতে পারেন : উপবৃত্তাকার; যা ক্যানিউজ অনুসারে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত।

এখানে জেসবিনে একটি ডেমো রয়েছে।

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big buts and I can not lie.
</div>

Comments

এই ফায়ারফক্স 15.0.1 কাজ করলো w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

— Jace

হ্যাঁ, এটি আরও নতুন সংস্করণে কাজ করছে বলে মনে হচ্ছে। স্পষ্টতই এই উত্তরটি এই মুহুর্তে কয়েক বছরের পুরানো।

— জো ফিলিপস

ফায়ারফক্স এটি সংস্করণ of হিসাবে সমর্থন করতে শুরু করে, যা ২০১১ এর শেষার্ধে প্রকাশিত হয়েছিল।

— রিচার্ড ইভ

আমি আমার সাধারণ জ্ঞানটি ব্যবহার করে বলতে পারি যে ভোট এবং মন্তব্যের ভিত্তিতে এই উত্তরটি "সঠিক"। তবে এই উত্তরটি কীভাবে "সঠিক" তা আমি বাস্তবে দেখতে ব্যর্থ হয়েছি। আমি উভয় overflow: hidden;এবং text-overflow: ellipsis;একটি <p>উপাদান (অর্থাত্, একটি ব্লক উপাদান) ব্যবহার করে এবং ...শেষে কিছুই খুঁজে পাই নি (অবশ্যই আমি নিশ্চিত করছি যে এটি সত্যই উপচে পড়েছে)। আমিও ছাড়াই এই চেষ্টা overflow: hidden;অংশ, এবং আরো একটি সঙ্গে <span>ভিতরে উপাদান <p>উপাদান যেখানে <p>উপাদান ছিল overflow: hidden;এবং <span>ছিল text-overflow: ellipsis;কোন ব্যাপার আমি চেষ্টা, এই একটি ব্যর্থ এসে গেছে ..

— VoidKing

ঠিক আছে, আমি মনে করি আমি সমস্যাটি জানি। আমি ভিত্তিতে ওভারফ্লোটি সীমাবদ্ধ করার চেষ্টা করছি max-heightতাই আমি white-space:সেট করতে পারি নাnowrap

— ভয়েডকিং

Answer 2

আপনার সমস্যার জন্য নিম্নলিখিত স্নিপেট পরীক্ষা করে দেখুন

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>

Comments

"হোয়াইট-স্পেস: নওরাপ" যোগ করার জন্য আপ যা কোনও ক্ষেত্রে প্রয়োজন হতে পারে

— লিও

2 টি লাইন প্রদর্শন করার জন্য পাঠ্যটি কীভাবে অদৃশ্য হয়ে যাবে?

— মার্টিয়ান2049

@ ম্যাটিয়ান ২০৪০ আপনি স্থির উচ্চতা এবং ওভারফ্লো লুকানো শৈলীর সাহায্যে সামঞ্জস্য করতে পারেন, এই ফ্রেডটি দেখুন jsfiddle.net/5135L4bx

— অর্জুন

আচ্ছা বুঝলাম. আমি চেষ্টা করেছিলাম. তবে মনে হচ্ছে দুটি লাইনের মানে আছে ... শেষে থাকবে না ...?

— মার্টিয়ান2049

display: inline-block;আমার জন্য অনুপস্থিত উপাদান ছিল। ধন্যবাদ.

— শেঠ

Answer 3

আপনি যদি লাইনগুলিকে 3 পর্যন্ত সীমাবদ্ধ করতে চান এবং তিন লাইনের পরে বিন্দু উপস্থিত হবে তা চেষ্টা করে দেখুন। আমরা যদি লাইনগুলি বাড়াতে চাই তবে কেবল-ওয়েবেকিট-লাইন-ক্ল্যাম্প মানটি পরিবর্তন করুন এবং দ্বি আকারের প্রশস্ততা দিন।

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Comments

ক্ষমাপ্রার্থনা, আমি নিশ্চিত যে আমি কীভাবে আপনার শব্দগুলি সরিয়ে দিয়েছি!

— আলেক

ক্রোমে দুর্দান্ত কাজ করে তবে মনে রাখবেন যে এটি ফায়ারফক্সে কাজ করবে না

— কেন বিগলার

আমি অন্য ব্রাউজারে এটি কীভাবে করব, বলুন ফায়ারফক্স? সম্পাদনা: stackoverflow.com/questions/33058004/...

— user3187724

Answer 4

আশা করি এটি আপনার জন্য সহায়ক:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

Answer 5

হ্যাঁ, text-overflowসিএসএস 3 এর মধ্যে সম্পত্তি হিসাবে ক্যাভেট: ব্রাউজারগুলিতে এটি সর্বজনীনভাবে সমর্থিত নয়।

Comments

ব্রাউজার সমর্থন প্রশংসনীয় অভিশাপ ভাল এখন, 2012 ফেব্রুয়ারী দেখতে হিসাবে caniuse.com/#search=text-overflow

— সাইমন ইস্ট

আহ, এই কারণটি আপনি তিন বছর পরে দেখিয়েছেন।

— মিস্টার লিস্টার

Answer 6

ইন বুটস্ট্র্যাপ 4 , আপনি একটি যোগ করতে পারেন .text-truncateএকটি ঊহ্য শব্দ পাঠ্য অগ্রভাগ ছাঁটিয়া শ্রেণী।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

Answer 7

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

Answer 8

বেশিরভাগ সমাধান এখানে স্থির প্রস্থ ব্যবহার করে। তবে এটি কিছু কারণে ভুল হতে পারে।

উদাহরণ: আমার অনেক কলাম সহ টেবিল ছিল। তাদের বেশিরভাগ সংকীর্ণ (স্থির প্রস্থ)। তবে মূল কলামটি যথাসম্ভব প্রশস্ত হওয়া উচিত (পর্দার আকারের উপর নির্ভর করে)।

এইচটিএমএল:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

সিএসএস:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

Answer 9

<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>

Answer 10

লোডের উপরে পাঠ্য লুকান এবং হোভারে দেখান show

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }