আমি ব্যবহার করেছি:
word-break:break-all;
table-layout:fixed;
এবং পাঠ্যটি Chrome এ মোড়ানো তবে ফায়ারফক্সে নয়।
আপডেট: আমি নকশাটি পরিবর্তন করার সিদ্ধান্ত নিয়েছি যাতে এটি মোড়ানো প্রয়োজন না; সিএসএস ফিক্স / হ্যাকটি বাছাই করার চেষ্টা করা হতাশার এবং সময় সাপেক্ষ প্রমাণিত হয়েছিল।
উত্তর:
এই ব্যবহার করে দেখুন, আমি মত "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" কিছু জন্য উত্পাদন করা হবে এই ইচ্ছার কাজ মনে
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
আমি গুগলের কয়েকটি ভিন্ন ওয়েবসাইট থেকে আমার উদাহরণ নিয়েছি। আমি এফএফ 5.0, আইই 8.0, এবং ক্রোম 10 এ পরীক্ষা করেছি।
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /* Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword">
</td>
</tr>
</table>
word-break: break-word;
CSS3 ব্যবহার করুন word-wrap: break-word;। ওয়েবকিট ভিত্তিক ব্রাউজারগুলিতে (সাফারি, ক্রোম) কাজ করে।
আপডেট : আমি ভুলে গিয়েছি, প্রশ্নের উপাদান অবশ্যই স্পষ্টভাবে বা স্পষ্টভাবে স্থির উপাদান হিসাবে অবস্থানের বা ব্লক উপাদান হিসাবে প্রদর্শিত হতে হবে। টেবিল কোষের জন্য ( td), ব্যবহার করুন display: inline-block;।
display: inline-block;।
ওপি যা চেয়েছিল তার উন্নত সংস্করণ এখানে।
কখনও কখনও, যা ঘটে তা হ'ল, আমাদের ক্লায়েন্ট চায় আমাদের শব্দের বিরতির পরে '-' লাইন শেষ করতে।
পছন্দ
AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB
বিরতি
AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB
সুতরাং, যদি নতুন সর্বশেষ ব্রাউজারগুলিতে সমর্থিত হয় তবে নতুন সিএসএস সম্পত্তি রয়েছে।
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
আমি এটি ব্যবহার করছি
আমি আশা করি কারও কারও এরকম চাহিদা থাকবে।
একটি স্বয়ংক্রিয় টেবিল বিন্যাসের জন্য সংশ্লিষ্ট টিডি বৈশিষ্ট্য সর্বাধিক প্রস্থ এবং শব্দ-মোড়ানো সমন্বিত করার চেষ্টা করুন।
যেমন: <td style="max-width:175px; word-wrap:break-word;"> ... </td>
ফায়ারফক্স 32, ক্রোম 37 এবং আই 11 এ পরীক্ষিত।
max-width, এবং এর সাথে নয় width। তা সত্ত্বেও আমার পক্ষে সেরা সমাধান, কারণ এটি নির্বিচারে বিন্দুতে শব্দগুলি ভাঙে না।
ব্রেক পয়েন্ট তৈরি করতে আপনি শূন্য প্রস্থের স্থানগুলিতে ম্যানুয়ালি ইনজেক্ট করতে পারেন (& # 8203;)।
<wbr>["শব্দ বিরতি" এর জন্য]। এখানে এবং ​সমাধানটির জন্য ব্রাউজার সমর্থনটি এখানে রয়েছে : quirksmode.org/oddsandends/wbr.html
tdট্যাগের জন্য একটি কলাম প্রস্থ সেট করুন ।
আমি মনে করি এটি ফায়ারফক্সের দীর্ঘস্থায়ী সমস্যা, এটি মজিলা এবং নেটস্কেপকে ফিরে আসে। আমি বাজি দেব যে আপনি দীর্ঘ ইউআরএল প্রদর্শনের সাথে সমস্যাটি নিয়ে আসছিলেন। আমি মনে করি যে কিছু কুৎসিত হ্যাক ছাড়াই আপনি সিএসএস দিয়ে কিছু ঠিক করতে পারেন তার চেয়ে রেন্ডারিং ইঞ্জিনের এটি একটি সমস্যা।
নকশা পরিবর্তন করতে বোধ তৈরি করে।
যদিও এটি আশাবাদী লাগছিল: http://hacks.mozilla.org/2009/06/word-wrap/
আমি আমার প্রকল্পের জন্য কৌণিক ব্যবহার করছি, এবং একটি সাধারণ ফিল্টার দিয়ে এটি সমাধান করতে পরিচালিত:
টেমপ্লেট:
<td>{{string | wordBreak}}</td>
ছাঁকনি:
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '$1');
}
})
আপনি এটি দেখতে পারবেন না, তবে $1একটি অদৃশ্য জায়গা থাকার পরে (টিপটির জন্য @kingjeffrey ধন্যবাদ), যা সারণী কোষগুলির জন্য শব্দটি সক্রিয় করে।
এটি করার একটি সামান্য হ্যাকিশ উপায় হ'ল প্রতিটি বর্ণের মধ্যে স্থান যুক্ত করার জন্য পাঠ্যটি প্রক্রিয়া করা by স্পেসগুলি এর সাথে প্রতিস্থাপন করুন তারপরে ফাঁকাগুলি নামিয়ে আনার জন্য লেটার-স্পেসিং সিএসএস অ্যাট্রিবিউট ব্যবহার করুন।
আমি জানি, এটি একটি হ্যাক ... তবে অন্য কিছু যদি না কাজ করে তবে সমস্যা ছাড়াই এটি মোড়ানো উচিত।