সিএসএস ওভারফ্লো - পাঠ্যের কেবল 1 লাইন

Question

আমি divনিম্নলিখিত সিএসএস শৈলী সঙ্গে আছে :

width:335px; float:left; overflow:hidden; padding-left:5px;

আমি যখন এতে প্রবেশ করি div, এটিতে একটি দীর্ঘ লম্বা পাঠ্য, এটি একটি নতুন লাইনে ভেঙে যায় এবং সমস্ত পাঠ্য প্রদর্শিত হয়। আমি যা চাই তা হ'ল কেবলমাত্র একটি লাইনের পাঠ্য যা লাইন-ব্রেক হবে না। যখন পাঠটি দীর্ঘ হবে, আমি চাই এই উপচে পড়া পাঠ্যটি অদৃশ্য হয়ে যাবে।

আমি উচ্চতা নির্ধারণের কথা ভাবছিলাম তবে এটি ভুল বলে মনে হচ্ছে।

হতে পারে আমি যদি হরফটি হরফটি হরফটি হ'ল ফন্টের সমান, তবে এটির কাজ করা উচিত এবং বিভিন্ন ব্রাউজারে কোনও সমস্যা না ঘটে?

আমি এটা কিভাবে করবো?

Comments

আপনি কি jsFizz এ আপনার সমস্যা প্রদর্শন করতে পারেন ?

— হ্যারি জয়

Answer 1

আপনি যদি এটি এক লাইনে সীমাবদ্ধ রাখতে চান white-space: nowrap;তবে ডিভের জন্য ব্যবহার করুন।

Comments

তবে যদি পাঠটি নির্দিষ্ট মাত্রার বাইরে চলে যায় তবে এটি উপবৃত্তগুলি প্রদর্শন করে না। stackoverflow.com/questions/26342411/...

— SearchForKnowledge

এটি দুর্দান্ত কাজ করে। তবে আমাকে ...আরও বেশি চরিত্র দেখাতে হবে কারণ যখন লম্বার দৈর্ঘ্য দীর্ঘ হয় এবং এটি লিখিত ডিভের বাইরে চলে যায়।

— মোশিহি

যদি লুকানো পাঠ্যে হাইপার লিঙ্ক থাকে তবে এটি অদ্ভুত কাজ করে। আমি যদি পৃষ্ঠাটি ট্যাব করে থাকি তবে এটি লুকানো টেক্সটের লিঙ্কটি স্ক্রিনে স্ক্রোল করে দেয়, যখন এটি লুকানো উচিত।

— এরিক

Answer 2

আপনি যদি ডিভিডিতে আরও বেশি সামগ্রী উপলব্ধ রয়েছে তা বোঝাতে চান তবে আপনি সম্ভবত "উপবৃত্ত" দেখাতে চাইতে পারেন:

text-overflow: ellipsis;

এটি white-space: nowrap;সেপ্টনুইটস দ্বারা প্রস্তাবিত ছাড়াও হওয়া উচিত ।

এছাড়াও, ফায়ারফক্সে এটি পরিচালনা করতে আপনি এই থ্রেডটি চেকআউট করেছেন তা নিশ্চিত করুন ।

Comments

আমি বিশ্বাস করি আপনি ব্যবহার করা আবশ্যক text-overflow: ellipsis;সঙ্গে overflow: hidden;এবং white-space: nowrap;এটি কাজ করা

— ফ্রান্সিসকো কোস্টা

caniuse.com/#feat=text-overflow ওরফে। হ্যা, তুমি পারো. শিরোনাম বৈশিষ্ট্যে পুরো বিষয়বস্তু রাখার বিষয়টি বিবেচনা করুন, সুতরাং ব্যবহারকারীর এখনও এতে অ্যাক্সেস থাকতে পারে।

— ড্যানম্যান

খনি মাত্র এক লাইনে শো এবং দেখাচ্ছে ঊহ্য শব্দ ... সামনে DIV পূরণ না stackoverflow.com/questions/26342411/... ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

Answer 3

আপনি এই সিএসএস কোডটি ব্যবহার করতে পারেন:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

পাঠ্য-ওভারফ্লো সিএসএস সম্পত্তি পরিস্থিতিতে যেখানে টেক্সট ছাঁটা যখন এটা উপাদান এর বক্স উপচে নিয়ে কাজ করে। এটি ক্লিপ করা যায় (অর্থাত্ কাটা, গোপন), একটি উপবৃত্ত প্রদর্শন করুন ('…', ইউনিকোড রেঞ্জ মান ইউ + 2026)।

নোট করুন যে টেক্সট-ওভারফ্লো কেবল তখনই ঘটে যখন ধারকটির ওভারফ্লো প্রপার্টিটির মান লুকানো , স্ক্রোল বা অটো এবং সাদা-স্থান থাকে: এখন আরপ; ।

পাঠ্য ওভারফ্লো কেবল ব্লক বা ইনলাইন-ব্লক স্তর উপাদানগুলিতেই ঘটতে পারে , কারণ ওভারফ্লো-এড হওয়ার জন্য উপাদানটির প্রস্থ থাকা দরকার। ওভারফ্লোটি দিকের সম্পত্তি বা সম্পর্কিত বৈশিষ্ট্যগুলির দ্বারা নির্ধারিত দিকের দিকে ঘটে।

Answer 4

ইউএক্স এবং ইউআইয়ের জন্য সেরা কোডটি

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

Answer 5

যদি যোগ করুন দয়া করে, আপনার যদি একটি দীর্ঘ পাঠ্য থাকে তবে দয়া করে আপনি এই সিএসএস কোডটি বেলো ব্যবহার করতে পারেন;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

পুরো লাইন পাঠ্যটি দৃশ্যমান করুন।

Answer 6

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

এক লাইনে ওভারফ্লো সেট করতে প্রস্থও নির্ধারণ করুন

Answer 7

আমার একই সমস্যা ছিল এবং আমি এটি ব্যবহার করে সমাধান করেছি:

display: inline-block;

উপর divপ্রশ্ন।