লম্বা শব্দের কোনও ডিভিডে শব্দ মোড়ানোর কোনও উপায় আছে কি?


173

আমি জানি ইন্টারনেট এক্সপ্লোরারটির একটি শব্দ-মোড়ানো শৈলী রয়েছে, তবে আমি জানতে চাই যে ডিভে পাঠ্য পাঠানোর জন্য ক্রস ব্রাউজারের কোনও পদ্ধতি আছে কিনা।

সিএসএস তবে জাভাস্ক্রিপ্ট স্নিপেটগুলিও ঠিক কাজ করবে work

সম্পাদনা: হ্যাঁ, দীর্ঘ স্ট্রিংগুলিকে উল্লেখ করে, চিয়ার্স লোকেরা!


7
শব্দ মোড়ক ডিফল্টরূপে ঘটে। আপনি মোড়ানো মানে কি আছে যখন হয় না আলাদা শব্দ?
কোয়ান্টিন

উত্তর:


313

মূল মন্তব্যটি পড়ে, রাদারফোর্ড অবিচ্ছিন্ন পাঠ্য মোড়ানোর জন্য ক্রস-ব্রাউজারের পথ খুঁজছেন (আই-র জন্য তাঁর শব্দ-মোড়নের ব্যবহার দ্বারা অবিচ্ছিন্ন স্ট্রিংগুলি ভাঙ্গার জন্য ডিজাইন করা)।

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

আমি এখন এই ক্লাসটি কিছুটা সময় ব্যবহার করেছি, এবং কবজির মতো কাজ করি। (দ্রষ্টব্য: আমি কেবল ফায়ারফক্স এবং আইইতে পরীক্ষা করেছি)


পুরাতন পোস্ট, তবে আইই কুইর্কস মোডে থাকলে স্পেস রেন্ডার হিসাবে উপস্থিত হয় না।
জেরেমি

2
আমি ফায়ারফক্স ২৪..6.০ ব্যবহার করছি এবং এটিই word-wrap: break-wordআসলে কাজ করেছিল।
ব্যবহারকারীর 4545424

3
Word-wrap: break-wordযদিও মাইক্রোসফ্ট দ্বারা নির্মিত এখন সিএসএস 3 স্ট্যান্ডার্ডের অংশ এবং এটি কৌশলটি কী :-)
পাস্কাল_ডের

38

পূর্ববর্তী উত্তরগুলির বেশিরভাগটি আমার পক্ষে ফায়ারফক্স ৩৮.০.৫ এ কাজ করে নি। এই ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

ডকুমেন্টেশন:


2
ধন্যবাদ! এটিই একমাত্র উত্তর যা কাজ করেছিল (শব্দ-বিরতি: ব্রেক-অল; যা আমার জন্য কাজ করেছিল)
ড্যানিসি


12

অ্যারন বেনেটের সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করছে, তবে আমাকে তার কোড থেকে এই লাইনটি সরিয়ে ফেলতে white-space: -pre-wrap;হয়েছিল -> কারণ এটি কোনও ত্রুটি দিচ্ছিল, সুতরাং চূড়ান্ত কার্যকারী কোডটি নিম্নলিখিতটি:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

আপনাকে অনেক ধন্যবাদ


1
অ্যারন বেনেট আপনার 2 বছর আগে এই একই উত্তরটি উল্লেখ করেছিলেন। আপনি এখানে যা করেছেন তাতে মান যুক্ত হয় না।
এএএ

6
হাই, আপনি দেখতে পাচ্ছেন যে আপনি উভয় উত্তর আবারও পড়েছেন কিনা, আমি যা বলছি তা হ'ল হারুনের সমাধান ঠিক আছে, তবে তিনি লিখেছেন যে কোনও একটি লাইনে আমি একটি ত্রুটি পেয়েছি, তাই আমি কেবল এটি সমাধান করেছিলাম যেটির জন্য কাজ করেছে আমাকে. হতে পারে তার উত্তরে আমার মন্তব্য করা উচিত, আমি এটি জানি, দুঃখিত এবং ধন্যবাদ
হুগো

আমাকে এই "হোয়াইট স্পেস: -প্রেম-র‌্যাপ" যুক্ত করতে হয়েছিল এবং এটি কাজ করেছিল :)
রবি খাম্বতি

0

ডেভিড উল্লেখ হিসাবে, divs না ডিফল্টরূপে মোড়ানো শব্দ।

আপনি যদি ফাঁকা জায়গা ছাড়াই পাঠ্যের সত্যিকারের দীর্ঘ স্ট্রিংগুলি উল্লেখ করছেন তবে আমি যা করি তা হ'ল স্ট্রিং সার্ভার-সাইডটি প্রক্রিয়া করা এবং খালি স্প্যানগুলি সন্নিবেশ করানো:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

এটি হুবহু নয় কারণ ফন্ট-আকার এবং এই জাতীয় সমস্যা রয়েছে। স্প্যান বিকল্পটি কাজ করে যদি ধারক আকারে পরিবর্তনশীল হয়। যদি এটি একটি নির্দিষ্ট প্রস্থের ধারক হয় তবে আপনি কেবল এগিয়ে যেতে পারেন এবং লাইন ব্রেকগুলি সন্নিবেশ করতে পারেন।


@ টমহার্ট এটি সত্যিই অদ্ভুত। যদিও, ভাল, IE। এটি কখনও কাজ করে না। বলেছিল, এটি পোস্ট করা হয়েছিল 5 বছর আগে। সিএসএস 3 এর এখন আরও কিছু ভাল ওয়ার্ড-মোড়ের বিকল্প রয়েছে যা আইই সংযুক্ত করতে পারে ডেভেলপার.মোজিলা.আর.ইন-
ডিএ।

হ্যাঁ আমি জানি, এই সমাধানটির সরলতা দেখে আমি কেবল হতভম্ব হয়েছি যে এটি চেষ্টা করে দেখতে হয়েছিল :)
টম হার্ট

0

আপনি ডিভের জন্য প্রস্থ নির্দিষ্ট করার চেষ্টা করতে পারেন, এটি পিক্সেল, শতাংশ বা ইএমএসে থাকুক না কেন এবং সেই সময়ে ডিভটি সেই প্রস্থে থাকবে এবং পাঠ্যটি স্বয়ংক্রিয়ভাবে ডিভের মধ্যে আবৃত হবে।


10px প্রস্থ সেট করার চেষ্টা করুন ... এবং তারপরে 10px এর চেয়ে দীর্ঘ শব্দটি ব্যবহার করুন
পল জহরা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.