এইচটিএমএল + সিএসএস: ডিভের বিষয়বস্তু কীভাবে এক লাইনে থাকতে বাধ্য করবেন?

Question

divসংজ্ঞায়িত সহ একটিতে আমার একটি দীর্ঘ পাঠ্য রয়েছেwidth :

এইচটিএমএল:

<div>Stack Overflow is the BEST !!!</div>

সিএসএস:

div {
    border: 1px solid black;
    width: 70px;
}

আমি কীভাবে স্ট্রিংটিকে এক লাইনে থাকতে বাধ্য করতে পারি (অর্থাত্ "ওভারফ্লো" এর মাঝখানে কাটা)?

আমি ব্যবহার করার চেষ্টা করেছি overflow: hidden, কিন্তু এটি কোনও লাভ হয়নি।

Comments

white-space: nowrapএটি আপনার স্টাইল ট্যাগে রাখুন।

— মোশি

Answer 1

এটা চেষ্টা কর:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

ব্যবহার করুন white-space:nowrapএবংoverflow:hidden

http://jsfiddle.net/NXchy/8/

Comments

text-overflow:ellipsis;আরও ভাল চেহারা জন্য উপরে যোগ করুন ।

— tj-recess

এটি কি কোনও সিএসএস দিয়ে অর্জন করা যায়?

— নিলন

Answer 3

আপনার সিএসএস ব্যবহার white-space:nowrap;

Answer 4

আপনার এইচটিএমএল কোড: <div>Stack Overflow is the BEST !!!</div>

সিএসএস:

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

এখন ফলাফলটি হওয়া উচিত:

স্ট্যাক ওভারফ ...

Answer 5

সবাই এই এক লাফিয়ে !!! আমিও এক ঝাঁকুনি তৈরি করেছি:

http://jsfiddle.net/audetwebdesign/kh4aR/

রবআগার white-space:nowrapপ্রথমে পয়েন্ট আউট করার জন্য একটি পয়েন্ট পায় ।

এখানে বেশ কয়েকটি জিনিস, আপনি overflow: hiddenযদি অতিরিক্ত বিন্যাসগুলি আপনার বিন্যাসে ছুঁড়ে দেখতে না চান তবে আপনার প্রয়োজন ।

এছাড়াও, যেমন উল্লেখ করা হয়েছে, আপনি ব্যবহার করতে পারে white-space: pre(EnderMB দেখুন) মনে রাখবেন যে রেখে preযেহেতু সাদা স্থান ভেঙ্গে করা হবে না white-space: nowrapইচ্ছার।

Answer 6

একবার চেষ্টা করে দেখুন এটি preপরিবর্তে nowrapআমি যেমন ধরে নেব যে আপনি এটি একইভাবে চালিত করতে চান তবে এটি ব্যবহার করে <pre>তবে এটি ঠিক কাজ করবে:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

Answer 7

আমি খুব একই জিনিসটি খুঁজতে এখানে ঝাঁপিয়েছি, কিন্তু কেউই আমার পক্ষে কাজ করেনি।

এমন উদাহরণ রয়েছে যেখানে আপনি যা করেন তা নির্বিশেষে এবং সিস্টেমের উপর নির্ভর করে (ওরাকল ডিজাইনার: ওরাকল 11 জি - পিএল / এসকিউএল), ডিভগুলি সর্বদা পরের লাইনে যাবে, সেক্ষেত্রে আপনার স্প্যান ট্যাগটি ব্যবহার করা উচিত।

এটি আমার জন্য বিস্ময়কর কাজ করেছে।

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

Comments

এটির জন্য বিশাল সহায়তা, এটিই আমার পক্ষে কাজ করেছিল, সম্ভবত 30 মিনিট ব্যয় করেছে, হ্যাঁ। অদ্ভুতরূপে, আপনি উল্লিখিত, সিএসএস, জাভাস্ক্রিপ্ট, বুটস্ট্র্যাপ এবং কিছু কাস্টম সিএসএস ব্যবহার করছি না।

— এডেনকর্বিন

Answer 8

এটি আপনার ডিভের সাথে যুক্ত করুন

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

Comments

আপনি যোগ করতে পারেন: ওভারফ্লো: একটি অনুভূমিক স্ক্রোলবারটি প্রদর্শন করতে অটো

— সারাহ ওয়েস্ট

Answer 9

div {
    display: flex;
    flex-direction: row; 
}

আমার জন্য কাজ করা সমাধান ছিল। div-তালিকাগুলির সাথে কিছু ক্ষেত্রে এটি প্রয়োজন।

কিছু বিকল্প দিকনির্দেশ মান row-reverse, column, column-reverse, unset, initial, inherit যা আপনি তাদের কাছ থেকে প্রত্যাশিত জিনিসগুলি করেন

Answer 10

উচ্চতা নির্ধারণ করার চেষ্টা করুন যাতে ব্লকটি আপনার পাঠ্যকে সামঞ্জস্য করতে এবং overflow: hiddenপ্যারামিটারটি রাখতে না পারে

সম্পাদনা: আপনার যদি 2 লাইনের উচ্চতা প্রদর্শন করতে হয় তবে আপনি যা পছন্দ করতে পারেন তার একটি উদাহরণ এখানে:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}

Comments

আপনার ক্ষেত্রে নওর্যাপ বিকল্পটি সম্ভবত আরও ভাল, তবে আমি আমার উত্তরটি ছেড়ে দিয়েছি কারণ আমি মাঝে মাঝে নিজেকে এমন একটি ব্লকের প্রয়োজন দেখতে পাই যা এর মতো উপচে না আসা পর্যন্ত কিছু লাইন মোড়ানো থাকতে পারে: jsfiddle.net/NXchy/7 ( স্টিফেনমুরডোকের সংস্করণ থেকে লিঙ্কটি পরিবর্তন করে, ধন্যবাদ!)

— ওয়াউটার সায়মনস

এটির দরকার নেই, ব্যবহারকারী সিটিটিএল- + ব্যবহার করে পাঠ্য আকারটি টানতে চান? উচ্চতা নমনীয় রাখা ভাল।

— মার্ক অডিট

ব্যবহারকারী পরিবর্তন করা তাহলে Ctrl- + + পাঠ্য মাত্র কাজ করা উচিত হল: jsfiddle.net/kpKW3

— Wouter সিমন্স

ব্যবহার em's heightএটা নমনীয়, কী বিন্দু পাশাপাশি আপনার উদাহরণে এখানে সচিত্র রাখে।

— মার্ক অডিট