কিভাবে আমার ডিভ ভাঙ্গা থেকে দীর্ঘ শব্দ রোধ করবেন?

148

সারণী-বিন্যাস থেকে ডিআইভি-লেআউটে স্যুইচ করার পরে, একটি সাধারণ সমস্যা রয়ে গেছে:

সমস্যা : আপনি আপনার ডিআইভিটিকে গতিশীল পাঠ্য দিয়ে পূর্ণ করেছেন এবং অবশ্যম্ভাবীভাবে একটি অতি দীর্ঘ শব্দ রয়েছে যা আপনার ডিভ কলামের প্রান্তে প্রসারিত এবং আপনার সাইটটিকে পেশাদারহীন দেখায়।

রেট্রো-ওয়াইনিং : টেবিল বিন্যাসগুলির সাথে এটি কখনও ঘটেনি। একটি সারণী ঘর সর্বদা দীর্ঘতম শব্দের প্রস্থে সুন্দরভাবে প্রসারিত হবে।

তদন্ত : আমি এমনকি সবচেয়ে বড় সাইটগুলিতে এই সমস্যাটি দেখতে পাচ্ছি, বিশেষত জার্মান সাইটগুলিতে যেখানে "স্পিড সীমা" এর মতো সাধারণ শব্দগুলিও খুব দীর্ঘ ("গেসভিন্ডিগিগিটস্বেগ্রেনজং")।

কারও কি এর কার্যক্ষম সমাধান আছে?

css  layout  html 
— এডওয়ার্ড টাঙ্গুয়ে
সূত্র
4
আপনি অবশ্যই এই দুর্দান্ত প্রসারিত এবং কার্যকরভাবে ভাঙা টেবিল বিন্যাসগুলি ভুলে গেছেন। আমি উপচে পড়ব: অনিয়ন্ত্রিতভাবে প্রসারিত কক্ষগুলির উপরে যে কোনও দিন লুকানো থাকবে।
— কর্নেল
1
একটি টেবিল সেল সর্বদা সুন্দরভাবে ???????? দীর্ঘতম শব্দের প্রস্থ প্রসারিত
— সত্ত্বেও
1
আমি প্রচুর লোককে জানি (এবং আমি সম্ভবত তাদের মধ্যে নিজেকে গণনা করব) যারা বলবেন যে এটি আরও খারাপ আচরণ। পৃষ্ঠা এবং উপাদানগুলির প্রস্থ সাধারণত এমন কিছু যা এতে প্রচুর সময় ব্যয় করে। আপনার যদি এলোমেলো শব্দগুলি প্রস্থগুলিকে নিয়ন্ত্রণহীন করে তুলতে পারে তবে আপনি নিজের নকশায় ব্যর্থ হয়েছেন।
— অলি
13
আমি সর্বদা অনুভব করেছি যে টেবিলের আচরণটি এইচটিএমএলের মূল নমনীয়তার দর্শনের সাথে সামঞ্জস্যপূর্ণ। ডিআইভি / সিএসএসের অনমনীয় কলাম প্রস্থ দর্শনের ম্যাগাজিন ডিজাইনারদের কাছ থেকে মনে হয় যারা তাদের কলামগুলি কখনও কখনও প্রশস্ত কখনও কখনও সংকীর্ণ হওয়ার সাথে মোকাবিলা করতে পারে না।
— এডওয়ার্ড টাঙ্গুয়ে
1
একটি ভাল নকশা সামঞ্জস্যপূর্ণ হওয়া উচিত; পৃষ্ঠার সামগ্রী যদি ইউআই এর মাত্রা পরিবর্তন করতে সক্ষম হয় তবে এটি নকশা লঙ্ঘন করবে। গুরুতরভাবে, আপনি প্রসারিত বিন্যাসের সাথে রেখাটি কোথায় আঁকবেন? Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?
— ডক্টর জোন্স

উত্তর:

138

নরম হাইফেন

নরম হাইফেন ( ­) সন্নিবেশ করে আপনি কোথায় লম্বা শব্দগুলি বিভক্ত করবেন তা ব্রাউজারগুলিকে বলতে পারেন :

averyvery­longword

হিসাবে রেন্ডার হতে পারে

averyverylongword

অথবা

অ্যাভেরিওরি-
লং ওয়ার্ড

একটি দুর্দান্ত নিয়মিত অভিব্যক্তি নিশ্চিত করতে পারে যে আপনি প্রয়োজনীয় না হলে আপনি সেগুলি সন্নিবেশ করবেন না:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

ব্রাউজার এবং অনুসন্ধান ইঞ্জিনগুলি পাঠ্য সন্ধান করার সময় এই চরিত্রটিকে উপেক্ষা করার মতো যথেষ্ট স্মার্ট এবং ক্লিপবোর্ডে পাঠ্য অনুলিপি করার সময় ক্রোম এবং ফায়ারফক্স (অন্যদের পরীক্ষা করেনি) এটিকে উপেক্ষা করে।

<wbr> উপাদান

অন্য বিকল্পটি হ'ল ইনজেকশন করা <wbr>, একটি প্রাক্তন আইই-ইস্ম , যা এখন এইচটিএমএল 5 এ রয়েছে :

averyvery<wbr>longword

হাইফেন ছাড়াই বিরতি:

অ্যাভেরিরি
লং ওয়ার্ড

আপনি শূন্য-প্রস্থ স্থান অক্ষর &#8203;(বা &#x200B) দিয়ে এটি অর্জন করতে পারেন ।

এফওয়াইআই সর্বশেষ আইই, ফায়ারফক্স এবং সাফারি ( তবে বর্তমানে ক্রোম নয় ) দ্বারা সিএসএসhyphens: auto সমর্থিত রয়েছে :

div.breaking {
  hyphens: auto;
}

তবে হাইফেনেশন একটি হাইফেনেশন অভিধানের উপর ভিত্তি করে এবং দীর্ঘ শব্দ ভাঙ্গার গ্যারান্টিযুক্ত নয়। এটি যদিও যুক্তিসঙ্গত পাঠ্যকে সুন্দর করতে পারে।

রেট্রো-হুইনিং দ্রবণ

<table>লেআউট জন্য খারাপ, কিন্তু display:tableঅন্যান্য উপাদান ঠিক আছে। এটি পুরানো-স্কুলের টেবিলগুলির মতোই স্পর্শকাতর (এবং প্রসারিত) হবে:

div.breaking {
   display: table-cell;
}

overflowএবং white-space: pre-wrapনীচের উত্তরগুলিও ভাল।

— Kornel
সূত্র
7
শান্ত! উইকিপিডিয়া অনুসারে, আপনি & # 8203 এর সাথে একটি শূন্য প্রস্থের স্থান পেতে পারেন; - যেহেতু আপনি এটি এনেছেন, আপনি কি এর জন্য কম-কুরুচিপূর্ণ পালানোর কোড জানেন? আমার যদি মনে হয় 8203 মুখস্থ করব, তবে ...
— ওজরাক
1
@ প্রকল্প - এটি আপনার মনে হয় কিনা তার উপর নির্ভর করে & # x200B; "কম কুশ্রী" বা না। :-) আফাইক, শূন্য-প্রস্থের জায়গার জন্য কোনও "শব্দের সত্তা" নেই।
— বেন ফাঁকা
1
এটি দুর্দান্ত তবে প্রাথমিক সমস্যার সমাধান নয়।
— আলবাস ডাম্বলডোর
25
এটি অনুলিপি / পেস্ট ভঙ্গ করে।
— নর্নাগন
4
শুধু এফওয়াইআই, আপনি <wbr> ব্যবহার করতে পারেন। Quirksmode.org/oddsandends/wbr.html দেখুন ।
— হ্যাক্সলিট
40

দুটি ফিক্স:

  1. overflow:scroll - এটি নিশ্চিত করে যে আপনার সামগ্রীটি ডিজাইনের ব্যয়ে দেখা যাবে (স্ক্রোলবারগুলি কুৎসিত)
  2. overflow:hidden- কেবল কোনও ওভারফ্লো কেটে দেয়। এর অর্থ লোকেরা যদিও সামগ্রীটি পড়তে পারে না।

যদি (এসও উদাহরণে) আপনি এটিকে প্যাডিংকে ওভারল্যাপিং করা বন্ধ করতে চান, আপনার বিষয়বস্তু ধরে রাখার জন্য আপনাকে সম্ভবত প্যাডিংয়ের ভিতরে আরও একটি ডিভি তৈরি করতে হবে।

সম্পাদনা করুন: অন্যান্য উত্তরগুলির হিসাবে, শব্দগুলি কেটে দেওয়ার বিভিন্ন পদ্ধতি রয়েছে, তা হ'ল ক্লায়েন্ট সাইডে রেন্ডার প্রস্থের বাইরে কাজ করা (কখনও কখনও এই সার্ভার-সাইডটি করার চেষ্টা করবেন না কারণ এটি কখনই নির্ভরযোগ্যভাবে কাজ করবে না, ক্রস প্ল্যাটফর্ম) জেএস এবং ব্রেক-ক্যারেক্টার সন্নিবেশ করানো, বা অ-মানক এবং / অথবা বুনোভাবে বেমানান সিএসএস ট্যাগ ব্যবহার করা ( word-wrap: break-word ফায়ারফক্সে কাজ করে বলে মনে হয় না )।

যদিও আপনার সর্বদা একটি ওভারফ্লো বর্ণনাকারী প্রয়োজন। যদি আপনার ডিভিতে আরও একটি বিস্তৃত ব্লক-ধরণের সামগ্রীর টুকরো (চিত্র, টেবিল ইত্যাদি) থাকে তবে এটির বিন্যাস / নকশাটি ধ্বংস না করার জন্য আপনার ওভারফ্লো প্রয়োজন।

সুতরাং যে কোনও উপায়ে অন্য পদ্ধতি (বা সেগুলির সংমিশ্রণ) ব্যবহার করুন তবে ওভারফ্লো যুক্ত করতে ভুলবেন না যাতে আপনি সমস্ত ব্রাউজারগুলি কভার করেন।

2 সম্পাদনা করুন (নীচে আপনার মন্তব্য ঠিকানা):

সিএসএস overflowসম্পত্তি ব্যবহার শুরু করা নিখুঁত নয় তবে এটি ডিজাইন ভাঙ্গা থামিয়ে দেয়। overflow:hiddenপ্রথমে আবেদন করুন । মনে রাখবেন ওভারফ্লো প্যাডিংয়ের উপর ভেঙে যেতে পারে না তাই নীড় divবা বর্ডারটি ব্যবহার করুন (যা আপনার পক্ষে ভাল কাজ করে)।

এটি উপচে পড়া সামগ্রীকে আড়াল করবে এবং তাই আপনার অর্থ হারাতে পারে। আপনি কোনও স্ক্রোলবার ব্যবহার করতে পারেন ( পরিবর্তে overflow:autoবা এর overflow:scrollপরিবর্তে overflow:hidden) তবে ডিভের মাত্রা এবং আপনার ডিজাইনের উপর নির্ভর করে এটি দুর্দান্ত দেখায় না বা কার্যকর হতে পারে।

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

কেবল সচেতন থাকুন যে এটি ব্যবহারকারীর সিপিইউগুলির ব্যয়ে আসে। এর ফলে পৃষ্ঠাগুলি লোড হতে এবং / অথবা আকার পরিবর্তন করতে দীর্ঘ সময় নেয়।

— অলি
সূত্র
1
পাঠ্য-ওভারফ্লো সহ: উপবৃত্ত; পাঠ্য সুন্দরভাবে কাটা যাবে।
— কর্নেল
1
পাঠ্য-ওভারফ্লো: উপবৃত্তগুলি কেবলমাত্র আইই (এবং এক্সটেনশন দ্বারা, অ-মানক)।
— অলি
overflow: scroll;বিষয়বস্তুতে দরকারী তথ্য রয়েছে সে ক্ষেত্রে আমি সর্বদা যেতে চাই । এবং তারপরে পরবর্তী লক্ষ্যটি হ'ল এমন সিএসএস তৈরি করার চেষ্টা করা যাতে স্ক্রোল বারগুলি উপস্থিত না হয়। এবং যদি তারা তা করে তবে আপনার কাছে সর্বদা ব্যাকআপ হিসাবে স্ক্রোল বার থাকে।
— ইয়েতি
ব্যবহার সংক্রান্ত text-overflow: ellipsis stackoverflow.com/a/22811590/759452
— Adrien হউন
33

এটি একটি জটিল সমস্যা, যেমনটি আমরা জানি, এবং ব্রাউজারগুলির মধ্যে কোনও সাধারণ উপায়ে সমর্থিত নয়। বেশিরভাগ ব্রাউজার এই বৈশিষ্ট্যটি মোটেই সমর্থন করে না।

এইচটিএমএল ইমেলগুলির সাথে সম্পন্ন কিছু কাজের ক্ষেত্রে, যেখানে ব্যবহারকারীর সামগ্রী ব্যবহার করা হচ্ছিল, তবে স্ক্রিপ্ট উপলব্ধ নেই (এবং সিএসএস এমনকি খুব ভাল সমর্থন করা যায় না) আপনার অপ্রত্যাশিত সামগ্রী ব্লকের চারপাশে একটি র‌্যাপারে সিএসএসের নিম্নলিখিত বিটটি অন্তত কিছুটা সহায়তা করা উচিত:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

মজিলা ভিত্তিক ব্রাউজারগুলির ক্ষেত্রে, উপরে উল্লিখিত এক্সবিএল ফাইলটিতে রয়েছে:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

দুর্ভাগ্যক্রমে, অপেরা 8+ উপরের সমাধানগুলির কোনওটি পছন্দ করছে বলে মনে হচ্ছে না, সুতরাং জাভাস্ক্রিপ্টটি সেই ব্রাউজারগুলির জন্য সমাধান হতে হবে (যেমন মজিলা / ফায়ারফক্স)) অপেরার পরবর্তী সংস্করণগুলি অন্তর্ভুক্ত করে এমন আরও একটি ক্রস-ব্রাউজার সমাধান (জাভাস্ক্রিপ্ট) that এখানে পাওয়া হ্যাজার ওয়াং এর স্ক্রিপ্টটি ব্যবহার করা হবে: http://www.hedgerwow.com/360/dhtML/css-word-break.html

অন্যান্য দরকারী লিঙ্ক / চিন্তা:

ইনকোহেনেন্ট ব্যাবল »ব্লগ সংরক্ষণাগার Mo মজিলা / ফায়ারফক্সের জন্য এমএসএস ওয়ার্ড-র‌্যাপ এমুলেট করা
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[ওইউ] অপেরাতে কোনও শব্দ মোড়ানো নয়, আইই
http://list.opera.com/pipermail/opera-users/2004- নভেম্বার/ 024467. html http://list.opera.com/pipermail/opera- এ জরিমানা দেখায়
ব্যবহারকারীদের / 2004-নভেম্বর / 024468.html

— নীল মনরো
সূত্র
আমার যা প্রয়োজন তা প্রস্থ: 100%? এর অর্থ বাইরের পাত্রে 100%। এর উদ্দেশ্য হ'ল অনুভূমিক স্ক্রোল বারগুলি পৃষ্ঠায় উপস্থিত হওয়া এবং বাকী বিন্যাসটিকে বিশৃঙ্খলা থেকে বাঁচানো।
— pilavdzice
1
ফায়ারফক্সের নতুন সংস্করণগুলি এখন word-wrap: break-word;সিএসএস সম্পত্তি সমর্থন করে , তাই যদি পূর্ববর্তী সংস্করণগুলির জন্য আপনার যদি ফায়ারফক্সে সমর্থন প্রয়োজন না হয় তবে আপনি এক্সবিএলকে মুছে ফেলতে পারেন।
— নিল মনরো
27

সিএসএস ক্রস ব্রাউজার ওয়ার্ড মোড়ানো

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
— রেমো
সূত্র
অপেরা 9.24- এ সমর্থিত নয়
— এসসিসি
14

শৈলী ব্যবহার করুন word-break:break-all;। আমি জানি এটি টেবিলে কাজ করে।

— sanimalp
সূত্র
@ সানীমাল্প অপেরা 9.24
— এসসিসি
13

আপনি কি বোঝাতে চান যে এটি সমর্থনকারী ব্রাউজারগুলিতে word-wrap: break-wordকাজ করে না?

তাহলে স্টাইলশীট লাশ সংজ্ঞা অন্তর্ভুক্ত , এটা সমগ্র নথি জুড়ে উচিত কাজ করে।

যদি ওভারফ্লো কোনও ভাল সমাধান না হয় তবে কেবলমাত্র একটি কাস্টম জাভাস্ক্রিপ্টই কৃত্রিমভাবে দীর্ঘ শব্দটি ছিন্ন করতে পারে।

দ্রষ্টব্য: এই <wbr>ওয়ার্ড ব্রেক ব্রেকও রয়েছে । এটি ব্রাউজারকে এমন একটি জায়গা দেয় যেখানে এটি লাইনটি আলাদা করে দিতে পারে। দুর্ভাগ্যক্রমে, <wbr>ট্যাগটি সমস্ত ব্রাউজারগুলিতে কাজ করে না, কেবল ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার (এবং একটি CSS ট্রিক সহ অপেরা)।

— VonC
সূত্র
9

সবেমাত্র আই 7, ফায়ারফক্স 3.6.8 ম্যাক, ফায়ারফক্স 3.6.8 উইন্ডোজ এবং সাফারি পরীক্ষা করেছে:

word-wrap: break-word;

একটি সেট প্রস্থ এবং একটি CSS এর মধ্যে কোন ওভারফ্লো ঘোষিত সঙ্গে একটি ডিভ ভিতরে দীর্ঘ লিঙ্ক জন্য কাজ করে:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

আমি কোনও বেমানান সমস্যা দেখছি না

— জ্যাক ইম্বোডেন
সূত্র
6

আমি এই প্রশ্নটি থেকে হাইফেনেটর সম্পর্কে সন্ধান করেছি । এটি সমস্যার সমাধান করতে পারে।

— dylanfm
সূত্র
এটি কীভাবে ওয়াল্ডইউরসাইট ডিলওয়াইথ উইথ কমেন্টস লাইকএটিও দেখতে সুন্দর এবং পরিচালনাযোগ্য। খুব ঠান্ডা.
— ojrac
6

অনেক লড়াইয়ের পরেও এটাই আমার পক্ষে কাজ করেছে:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

ক্রোম, ফায়ারফক্স এবং অপেরার সর্বশেষতম সংস্করণগুলিতে কাজ করে।

নোট করুন যে আমি white-spaceঅন্যদের প্রস্তাবিত অনেকগুলি সম্পত্তি বাদ দিয়েছি - যা আসলে preআমার জন্য ইন্ডেন্টেশনটি ভেঙে দেয় ।

— mpen
সূত্র
5

আমার জন্য স্থির আকার ছাড়াই এবং গতিশীল সামগ্রী সহ এটি ব্যবহার করে কাজ করেছে:

display:table;
word-break:break-all;
— জ্যাকব
সূত্র
4

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

উদাহরণস্বরূপ, এটি:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1&shy;$2')

... এর ফলাফল:

abcde&shy;12345678901234

সমস্যাটি এড়াতে ইতিবাচক চেহারাটির ব্যবহার করে এখানে একটি সংস্করণ দেওয়া হয়েছে:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1&shy;')

... এই ফলাফল সহ:

abcde&shy;12345&shy;67890&shy;1234
— enigment
সূত্র
4

আমি এই সমস্যার জন্য সাধারণত যে সমাধানটি ব্যবহার করি তা হ'ল আইই এবং অন্যান্য ব্রাউজারগুলির জন্য 2 টি আলাদা সিএসএস বিধি সেট করা:

word-wrap: break-word;

আই -তে নিখুঁত woks, তবে শব্দ-মোড়ানো কোনও স্ট্যান্ডার্ড CSS বৈশিষ্ট্য নয়। এটি একটি মাইক্রোসফ্ট নির্দিষ্ট সম্পত্তি এবং ফায়ারফক্সে কাজ করে না।

ফায়ারফক্সের জন্য, কেবলমাত্র সিএসএস ব্যবহার করে সবচেয়ে ভাল কাজটি হ'ল নিয়মটি সেট করা

overflow: hidden;

যে উপাদানটিতে আপনি মোড়াতে চান সেই উপাদানটির জন্য। এটি পাঠ্যটি মোড়ানো নয়, তবে পাঠ্যের অংশটি লুকিয়ে রাখুন যা ধারকটির সীমাতে চলে গেছে । আপনি যদি সমস্ত পাঠ্য প্রদর্শন করার জন্য প্রয়োজনীয় না হন তবে এটি একটি দুর্দান্ত সমাধান হতে পারে (যেমন পাঠ্যটি কোনও <a>ট্যাগের অভ্যন্তরে থাকে)

— alexmeia
সূত্র
শব্দ-মোড়ানো: ব্রেক-শব্দটি 10 ​​ফায়ারফক্সে আমার জন্য ঠিক আছে বলে মনে হচ্ছে
— জোন স্নাইডার
CanIUse বলছে এটি আইই 8 +, ফায়ারফক্স 28 +, ক্রোম 33 +, সাফারি 7 + এবং আরও অনেকের সাথে সুসংগত। caniuse.com/#search=word-wrap
— Adrien
4

আপডেট: সিএসএসে এটি পরিচালনা করা আশ্চর্যজনকভাবে সহজ এবং লো ওভারহেড, তবে যখন বিরতিগুলি ঘটে তখন আপনার কোনও নিয়ন্ত্রণ নেই। আপনার যত্ন না নিলে এটি ঠিক আছে, বা কোনও প্রাকৃতিক বিরতি ছাড়াই আপনার ডেটা দীর্ঘ অক্ষরে অক্ষরে চলেছে। আমাদের প্রচুর লম্বা ফাইল পাথ, ইউআরএল এবং ফোন নম্বর ছিল, এর সবকটিতেই অন্যদের তুলনায় এটি ভাঙা উল্লেখযোগ্যভাবে ভাল।

আমাদের সমাধানটি হ'ল শ্বেত স্পেস নয় এমন একটি বিশেষ অক্ষর বা আমরা যেখানে বিরতি পছন্দ করতাম তার মধ্যে একটি বিশেষ অক্ষরগুলির পরে শূন্য-প্রস্থের স্থান (& # 8203;) লাগাতে প্রথমে একটি রেজেক্স প্রতিস্থাপন ব্যবহার করা হয়েছিল। তারপরে আমরা সেই বিশেষ অক্ষরের পরে শূন্য-প্রস্থের স্থান রাখতে অন্য প্রতিস্থাপন করি do

শূন্য প্রস্থের স্পেসগুলি দুর্দান্ত, কারণ এগুলি স্ক্রিনে কখনও দেখা যায় না; লাজুক হাইফেনগুলি যখন তারা দেখিয়েছিল তখন বিভ্রান্ত হয়েছিল, কারণ ডেটাটিতে উল্লেখযোগ্য হাইফেন রয়েছে। আপনি যখন ব্রাউজার থেকে পাঠ্য অনুলিপি করেন তখন শূন্য-প্রস্থের স্থানগুলিও অন্তর্ভুক্ত থাকে না।

আমরা বর্তমানে যে বিশেষ বিরতি অক্ষরগুলি ব্যবহার করছি তা হ'ল পিরিয়ড, ফরোয়ার্ড স্ল্যাশ, ব্যাকস্ল্যাশ, কমা, আন্ডারস্কোর, @, | এবং হাইফেন। হাইফেনের পরে ব্রেকিংকে উত্সাহিত করার জন্য আপনার কিছু করার দরকার হবে বলে আপনি ভাবেন না, তবে ফায়ারফক্স (কমপক্ষে 3.6 এবং 4) সংখ্যার (ফোন নম্বরগুলির মতো) ঘেরা হাইফেনগুলিতে নিজেই ভেঙে যায় না।

আমরা উপলব্ধ লেআউট জায়গার উপর ভিত্তি করে কৃত্রিম বিরতিগুলির মধ্যে অক্ষরের সংখ্যাও নিয়ন্ত্রণ করতে চেয়েছিলাম। এর অর্থ হ'ল দীর্ঘ বিরতিহীন রানের সাথে ম্যাচ করার জন্য রেজেক্সের গতিশীল হওয়া দরকার। এটি প্রচুর পরিমাণে বলা হয়ে থাকে এবং আমরা পারফরম্যান্সের কারণে একই ধরণের একই পুনর্নির্মাণগুলি তৈরি করতে চাই না, তাই আমরা রেগেক্স এক্সপ্রেশন এবং এর পতাকাগুলি দ্বারা চিহ্নিত একটি সাধারণ রেইগেক্স ক্যাশে ব্যবহার করেছি।

কোডটি এখানে; আপনি সম্ভবত কোনও ইউটিলিটি প্যাকেজে ফাংশনগুলির নাম উল্লেখ করেছেন:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1&#8203;') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1&#8203;'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

এর মতো পরীক্ষা করুন:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

আপডেট করুন 2: মনে হচ্ছে আসলে শূন্য প্রস্থ স্পেস হয় অন্তত কিছু পরিস্থিতিতে কপি করা টেক্সট মধ্যে অন্তর্ভুক্ত, আপনি শুধু তাদের দেখতে পারে না। স্পষ্টতই, লোকেরা এতে লুকানো অক্ষরের সাথে পাঠ্য অনুলিপি করতে উত্সাহিত করা যেমন অন্য প্রোগ্রাম বা সিস্টেমে এমনকি আপনার নিজের ক্ষেত্রেও প্রবেশ করতে পারে এমন ডেটা থাকার আমন্ত্রণ where যেখানে এটি সমস্যার কারণ হতে পারে। উদাহরণস্বরূপ, এটি যদি কোনও ডাটাবেসে শেষ হয় তবে এর বিরুদ্ধে অনুসন্ধানগুলি ব্যর্থ হতে পারে এবং এর মতো অনুসন্ধানের স্ট্রিংগুলিও ব্যর্থ হতে পারে। এটির মতো ডেটা সরাতে তীর কীগুলি ব্যবহার করার জন্য আপনি দেখতে পাচ্ছেন না এমন চরিত্রটি অতিক্রম করার জন্য (সঠিকভাবে) একটি অতিরিক্ত কিপ্রেস প্রয়োজন, ব্যবহারকারীরা যদি তাদের লক্ষ্য করে তবে কিছুটা উদ্ভট।

একটি বদ্ধ সিস্টেমে আপনি নিজের সুরক্ষার জন্য এই চরিত্রটিকে ইনপুট থেকে ফিল্টার করতে পারেন, তবে এটি অন্যান্য প্রোগ্রাম এবং সিস্টেমগুলিকে সহায়তা করে না।

সবই বলা হয়েছিল, এই কৌশলটি ভালভাবে কাজ করে, তবে ব্রেক-কারণের চরিত্রের সেরা পছন্দটি কী হবে তা আমি নিশ্চিত নই।

আপডেট 3: এই চরিত্রটি ডেটা অবধি ধারণ করা এখন আর তাত্ত্বিক সম্ভাবনা নয়, এটি একটি পর্যবেক্ষণ সমস্যা। ব্যবহারকারীরা স্ক্রিন থেকে অনুলিপি করা ডেটা জমা দেয়, এটি ডিবিতে সংরক্ষণ হয়ে যায়, বিরতি সন্ধান করে, বিষয়গুলিকে অদ্ভুতভাবে সাজায় ইত্যাদি ..

আমরা দুটি জিনিস করেছি:

  1. এই অ্যাপ্লিকেশনটির জন্য সমস্ত ডাটাসোর্সে সমস্ত টেবিলের সমস্ত কলাম থেকে এগুলি সরাতে একটি ইউটিলিটি লিখেছিলেন।
  2. এটি আমাদের স্ট্যান্ডার্ড স্ট্রিং ইনপুট প্রসেসরে সরানোর জন্য ফিল্টারিং যোগ করা হয়েছে, সুতরাং কোনও কোড এটি দেখার সময় হয়ে যায়।

এটি কৌশলটি যেমন কাজ করে তেমনি ভাল কাজ করে তবে এটি একটি সতর্কতার কাহিনী।

আপডেট 4: আমরা এটি এমন একটি প্রসঙ্গে ব্যবহার করছি যেখানে এটি দেওয়া ডেটা এইচটিএমএল এড়ানো হতে পারে। সঠিক পরিস্থিতিতে, এটি মজাদার ফলাফল সহ এইচটিএমএল সত্তাদের মাঝখানে শূন্য প্রস্থের স্থান সন্নিবেশ করতে পারে।

ফিক্সটি হ'ল আমরা যে অক্ষরগুলি ভাঙ্গি না তার তালিকায় এম্পারস্যান্ড যুক্ত করা ছিল:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');
— enigment
সূত্র
আমি এটি ব্যবহার করেছি, তবে লম্বা ডোমেন নামের জন্য আমার এটি একবার চালানো দরকার ছিল তাই আমি এটি কেবল ছোট করে if(domainName.length > 15) domainName.replace(/([^\\s]{5})(?=[^\\s])/g, '$1&#8203;');
— রেখেছি
3

ওয়ার্ড-মোড়কের কাজ করার জন্য "টেবিল-বিন্যাস: স্থির" সেট করা দরকার

— aleks
সূত্র
1
এই জন্য আপনাকে ধন্যবাদ! শব্দ-মোড়ানো: বিরতি-শব্দ; অন্যথায় টেবিলের জন্য কাজ করবে না।
— liviucmg
2

HYPHENATOR সঠিক উত্তর (উপরে দেওয়া)। আপনার প্রশ্নের পিছনে আসল সমস্যাটি হ'ল ওয়েব ব্রাউজারগুলি এখনও (২০০৮ সালে) অত্যন্ত আদিম যে তাদের কোনও হাইফেনেশন বৈশিষ্ট্য নেই। দেখুন, আমরা এখনও কম্পিউটার ব্যবহারের প্রথম শুরুতে রয়েছি - আমাদের ধৈর্য ধরতে হবে। ডিজাইনাররা যতক্ষণ না ওয়েব দুনিয়ায় রাজত্ব করেন আমরা কিছু বাস্তব দরকারী নতুন বৈশিষ্ট্যের জন্য অপেক্ষা করতে খুব কঠিন সময় কাটাব।

আপডেট: ডিসেম্বর, ২০১১ পর্যন্ত, এফএফ এবং সাফারিতে এই ট্যাগগুলির উদীয়মান সমর্থন সহ আমাদের কাছে এখন আর একটি বিকল্প রয়েছে:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

আমি কিছু বেসিক পরীক্ষা করেছি এবং এটি মোবাইল সাফারি এবং সাফারি 5.1.1 এর সাম্প্রতিক সংস্করণে কাজ করছে বলে মনে হচ্ছে।

সামঞ্জস্যতা সারণী: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

— স্নেকি লাভ
সূত্র
2

IE 8+ ব্যবহারের সাথে সামঞ্জস্যের জন্য:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

এটি এখানে দেখুন http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

আমাকে যা করতে হয়েছিল তা হ'ল সেট প্রস্থের সাথে ডিভ কনটেইনার স্টাইলে এটি প্রয়োগ করা।

— DoctorFox
সূত্র
1

আপনার যদি এটি থাকে -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

কেবল ডিভস সহ একটি উল্লম্ব বিন্যাসে স্যুইচ করুন এবং প্রস্থের পরিবর্তে আপনার সিএসএসে ন্যূনতম প্রস্থ ব্যবহার করুন -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

অবশ্যই, আপনি যদি খাঁটি টেবুলার ডেটা প্রদর্শন করছেন তবে আসল টেবিলটি শব্দার্থগতভাবে সঠিক বলে এটি ব্যবহার করা ঠিক এবং এটি টেবিলে থাকা স্ক্রিন পাঠকদের ব্যবহার করে লোকদের অবহিত করবে। এটি এগুলি সাধারণ বিন্যাস বা চিত্র-স্লাইসিংয়ের জন্য ব্যবহার করছে যার জন্য লোকেরা আপনাকে লঞ্চ করে দেবে।

— ড্যান ব্রাউন
সূত্র
1

আমাকে নিম্নলিখিতগুলি করতে হয়েছিল কারণ, সম্পত্তিগুলি যদি সঠিক ক্রমে ঘোষণা না করা হয়, তবে এটি এলোমেলোভাবে ভুল জায়গায় শব্দ এবং একটি হাইফেন যুক্ত না করে শব্দগুলি ভেঙে দেবে। 

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

মূলত এনিগমো পোস্ট করেছেন: https://stackoverflow.com/a/14191114

— jacobsvensson
সূত্র
1

হ্যাঁ, যদি এটি সম্ভব হয় তবে একটি নিখুঁত প্রস্থ সেট করা এবং সেটিংটি overflow : autoভাল কাজ করে।

— জন গিয়েজেন
সূত্র
1 
p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}
— microbians
সূত্র
0

সমস্ত শব্দ মোড়ানো এবং বিরতি পরে, আপনার ওভারফ্লো সংরক্ষণ করুন এবং দেখুন এটি আপনার সমস্যার সমাধান করে কিনা। আপনার ডিভের প্রদর্শনটি কেবল এতে পরিবর্তন করুন:display: inline;

— ওলোফু মার্ক
সূত্র
-1

একটি সাধারণ ফাংশন (আন্ডারস্কোর.জেএস প্রয়োজন) - উত্তর @ উত্তর ভিত্তিক ভিত্তিতে

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('&shy;'));
        });
        return shystring.join(' ');
    };
— hharnisc
সূত্র
-1

আমি একটি ফাংশন লিখেছি যা দুর্দান্ত কাজ করে যেখানে এটি &shy;ভাল লাইন ভাঙার জন্য শব্দটিতে x অক্ষর সন্নিবেশ করে। এখানে সমস্ত উত্তর সমস্ত ব্রাউজার এবং ডিভাইস সমর্থন করে না তবে এটি পিএইচপি ব্যবহার করে ভাল কাজ করে:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '&shy;', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}
— নাবিক
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.