سوال: جلوگیری از نمایش حروف به هم چسبیده در جداول [بایگانی]

masudafsar

دوشنبه 21 مرداد 1392, 21:12 عصر

سوالم عجیبه نه!

وقتی کاربری متنی الکی مثل "ممممممممممممممممممممممممم ممممممممممممممممممم" رو وارد میکنه در سایز جدولی که مقادیر رو می خوام توش نشون بدم بهم میریزه. آیا میشه با CSS کاری کرد که جلوی برهم زدن نظم گرفته بشه؟

108985

همون طور که تو عکس میبینید فیلد آخری ظاهر سایت رو بهم ریخته!

meysam1366

دوشنبه 21 مرداد 1392, 21:18 عصر

سوالم عجیبه نه!

وقتی کاربری متنی الکی مثل "ممممممممممممممممممممممممم ممممممممممممممممممم" رو وارد میکنه در سایز جدولی که مقادیر رو می خوام توش نشون بدم بهم میریزه. آیا میشه با CSS کاری کرد که جلوی برهم زدن نظم گرفته بشه؟

108985

همون طور که تو عکس میبینید فیلد آخری ظاهر سایت رو بهم ریخته!

سلام دوست عزیز

شما از این کد توی فایل CSS تون استفاده کنید ببینید مشکل حل میشه؟

word-wrap:break-word;

موفق باشید

masudafsar

دوشنبه 21 مرداد 1392, 21:23 عصر

سلام دوست عزیز

شما از این کد توی فایل CSS تون استفاده کنید ببینید مشکل حل میشه؟

word-wrap:break-word;

موفق باشید

متاسفانه نشد. فک کنم چون کل متن رو یک کلمه تشخیص میده نمیتونه break کنه.

meysam1366

دوشنبه 21 مرداد 1392, 21:34 عصر

متاسفانه نشد. فک کنم چون کل متن رو یک کلمه تشخیص میده نمیتونه break کنه.

لطفا کدتون رو اینجا قرار بدید تا بهتر بتونیم راهنماییتون کنیم

masudafsar

دوشنبه 21 مرداد 1392, 23:36 عصر

این هم کد:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#main{
width: 600px;
margin: 0 auto;
background-color:#dedede;
}
#main td{
word-wrap: break-word;
width:100px;
border-collapse: collapse;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="main">
<table>
<tr>
<td>هخحکمنتنتئتدادذلرذیتنبتسی لتیسلسیمنتلتقثلمسنتیبنتمس یبدذلسللمثقتلنمیبتدذتبیلت اسلیمتلناتیلندیبسریبرمنتا دنف</td>
<td>بمینستبمکهبیسلمنشسئب.شسوب� �میس.وربسیئ.لیبذئس.یولئشس.ل� �ئبیلوشئ</td>
</tr>
<tr>
<td>ققققققققققققققققققق</td>
<td>ثیثزثبزسیربیرشبرییل</td>
</tr>
</table>
</div>
</body>
</html>

اگر اجراش کنید می بینید که جدول از محدوده ی خودش بیرون زده! :گریه:

masudafsar

دوشنبه 21 مرداد 1392, 23:40 عصر

کد رو که می زارم ادیتور فروم تغییرش میده!

کافیه داخل سلول های جدول یک سری حروف بدون space وارد کنید.

tadayoni

سه شنبه 22 مرداد 1392, 15:12 عصر

با jquery بعد از مثلا هر 30 حرف بطور خودکار یه /n اضافه کنید که بیاد سطر بعدی

meysam1366

سه شنبه 22 مرداد 1392, 15:50 عصر

این هم کد:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#main{
width: 600px;
margin: 0 auto;
background-color:#dedede;
}
#main td{
word-wrap: break-word;
width:100px;
border-collapse: collapse;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="main">
<table>
<tr>
<td>هخحکمنتنتئتدادذلرذیتنبتسی لتیسلسیمنتلتقثلمسنتیبنتمس یبدذلسللمثقتلنمیبتدذتبیلت اسلیمتلناتیلندیبسریبرمنتا دنف</td>
<td>بمینستبمکهبیسلمنشسئب.شسوب� �میس.وربسیئ.لیبذئس.یولئشس.ل� �ئبیلوشئ</td>
</tr>
<tr>
<td>ققققققققققققققققققق</td>
<td>ثیثزثبزسیربیرشبرییل</td>
</tr>
</table>
</div>
</body>
</html>

اگر اجراش کنید می بینید که جدول از محدوده ی خودش بیرون زده! :گریه:

سلام دوست عزیز

الان که کدتون درسته و مشکلی نداره

ببینید عکس رو این کد شماست

masudafsar

چهارشنبه 23 مرداد 1392, 00:21 صبح

سلام دوست عزیز

الان که کدتون درسته و مشکلی نداره

ببینید عکس رو این کد شماست

میثم جون تو آخرین پستم گقتم که ادیتور فروم کد رو خراب میکنه!

فایل زیر رو ببین بهتره.

masudafsar

چهارشنبه 23 مرداد 1392, 00:23 صبح

با jquery بعد از مثلا هر 30 حرف بطور خودکار یه /n اضافه کنید که بیاد سطر بعدی

من نتونستم کدش رو بنویسم. شما میتونید کمکم کنید؟
در ضمن فک کنم اگر یه space هم بزاره بین حروف مشکل حل میشه. نیازی به /n نیست.

refugee

چهارشنبه 23 مرداد 1392, 10:29 صبح

مسعود داداش وقتی یک اسپیس بذاره حل میشه , پس چه نیازیه اینقدر خودتو اذیت کنی ؟

مسلما کاربر هم نمیاد این همه حروف کنار هم چسپیده بزنه ... ( یا با جی کوئری که دوستمون گفتن درست کنید یا از خیرش بگذر )

titreaval

چهارشنبه 23 مرداد 1392, 10:42 صبح

خوب اگه صفحه استاتیک باشه
که کاربر به آن دسترسی نداره
و اگر داینامیک باشه
با php شرط بگذارید که
یا از فلان مقدار کاراکتر بیشتر نشه
تا حتی اگر پیوسته هم باشه از طول ستون جدول فرا تر نره
مثلا :

if(mb_strlen($row['name'])>20){
echo mb_substr($row['name'], 0, 20, 'UTF-8').'...';}

titreaval

چهارشنبه 23 مرداد 1392, 11:45 صبح

سوال خودم از این سوال
جدول سه بعدی میشه درست کرد ...
تو بدنه ی css و html به شکل ابتکاری ؟
منظورم مکعبی بود . تو ذهن شما اسلاید شو نیاد یک وقت
منظوم ادامه پزیری عرضی هست که در اسلاید شو نمی گنجه و با اسکرول انجام نشه بلکه وجه دوم و سوم ...

webtracker

چهارشنبه 23 مرداد 1392, 11:47 صبح

شما کافی به جای width از max-width در #main td استفاده کنید

titreaval

چهارشنبه 23 مرداد 1392, 11:55 صبح

نه این کار سه بعدی نمیکنه
کارش اینه که تا فلان عرض می تونه باش و کمتر
اما اگه متن زیاد باشه میزنه بیرون به احتمال 99 درصد
من سه بعدی گفتم نه 2 بعدی

webtracker

چهارشنبه 23 مرداد 1392, 12:40 عصر

نه این کار سه بعدی نمیکنه
کارش اینه که تا فلان عرض می تونه باش و کمتر
اما اگه متن زیاد باشه میزنه بیرون به احتمال 99 درصد
من سه بعدی گفتم نه 2 بعدی
می بخشید من در جواب سوال ابن تایپیک گفتم و در رابطه باسوال شما نبود اگه فکر می کنید اشتیاه می تونید امتحان کنید این هم لینک نمایش :http://jsfiddle.net/kSpST/

masudafsar

چهارشنبه 23 مرداد 1392, 13:26 عصر

سوال خودم از این سوال
جدول سه بعدی میشه درست کرد ...
تو بدنه ی css و html به شکل ابتکاری ؟
منظورم مکعبی بود . تو ذهن شما اسلاید شو نیاد یک وقت
منظوم ادامه پزیری عرضی هست که در اسلاید شو نمی گنجه و با اسکرول انجام نشه بلکه وجه دوم و سوم ...

تو رو خدا بحث رو عوض نکنید. عزیزم تاپیک ایجاد کردن مفته مفته!

masudafsar

چهارشنبه 23 مرداد 1392, 13:30 عصر

شما کافی به جای width از max-width در #main td استفاده کنید

ایده شما کاملا درسته ولی به تنهایی کار ساز نیست. باید با overflow بکار بره.
مثلا اگر بیشتر بود اسکرول برای هر سلول گذاشته بشه یا hidden کنه.

ولی من می خوام حروف به هم چسبیده رو با CSS از هم جدا کنم و در سطر های مختلف نشون بدم. مثل چیزی که در زیان انگلیسی اتفاق می افته.

meysam1366

چهارشنبه 23 مرداد 1392, 13:35 عصر

شما کافی به جای width از max-width در #main td استفاده کنید

دوست عزیزیمون راهنمایی درست رو کردن

آقا مسعود مشکلتون حل شد؟

masudafsar

چهارشنبه 23 مرداد 1392, 13:43 عصر

عزیزان مشکل حل شد.

خیلی هم خوب و عالی با 2 خط CSS:
max-width: 200px;
word-wrap: break-word;

با تشکر از meysam1366 و webtracker.

refugee

چهارشنبه 23 مرداد 1392, 19:54 عصر

خب خدا رو شکر که حل شد .

منم پیگیر بودم که اخرش چی میشه :لبخند:

همه امده بودیم کمکت کنیم مسعود

titreaval

چهارشنبه 23 مرداد 1392, 20:02 عصر

ولی منو همه تو پستهای آخر . ... دلم گرفت :گریه:

/تو رو خدا بحث رو عوض نکنید. عزیزم تاپیک ایجاد کردن مفته مفته! /

صد بار این تاپیک رو خوندم :

if(mb_strlen($row['name'])>20){ echo mb_substr($row['name'], 0, 20, 'UTF-8').'...';}

نهایت زور من بود که همیشه از این روش برای نمایش اطلاعات استفاده میکردم
و در طبق اخلاص نهادم

:لبخند:

اما آخر نفمیدم سایت ایشون چی بود داینامیک یا استاتیک

---------------------------------------

خدارو شکر درست شد

meysam1366

چهارشنبه 23 مرداد 1392, 20:27 عصر

ولی منو همه تو پستهای آخر . ... دلم گرفت :گریه:

/تو رو خدا بحث رو عوض نکنید. عزیزم تاپیک ایجاد کردن مفته مفته! /

صد بار این تاپیک رو خوندم :

if(mb_strlen($row['name'])>20){ echo mb_substr($row['name'], 0, 20, 'UTF-8').'...';}

نهایت زور من بود که همیشه از این روش برای نمایش اطلاعات استفاده میکردم
و در طبق اخلاص نهادم

:لبخند:

اما آخر نفمیدم سایت ایشون چی بود داینامیک یا استاتیک

---------------------------------------

خدارو شکر درست شد

سلام دوست عزیز

سوال ایشون استاتیک بود چون اگر داینامیک بود توی تالار خودش سوال می کرد

موفق باشید

tadayoni

پنج شنبه 24 مرداد 1392, 00:37 صبح

آین کد جاوا اسکریپت
function truncateString (string, limit, breakChar) {
if (string.length <= limit) return string;

for_c = string.length / limit;
i = 0;
while(i < dor_c){
my_str += string.substr(i*limit, limit);
my_str += breakChar;
i++;
}
return my_str;

}
سه تا ورودی میگیره
اولی خود متن
دومی محدوده ای که میخوای به تعداد اون کاراکتر بگیره
و سومی کاراکتری که میخوای اضافه بشه مثل فاصله

refugee

پنج شنبه 24 مرداد 1392, 12:48 عصر

تدیونی میشه لطف کنید همین تیکه کد جاوا رو با این کد استارتر مچ کنی برای تست , میخواهم ببینم چطوری میشه :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#main{
width: 600px;
margin: 0 auto;
background-color:#dedede;
}
#main td{
word-wrap: break-word;
width:100px;
border-collapse: collapse;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="main">
<table>
<tr>
<td>هخحکمنتنتئتدادذلرذیتنبت سیلتیسلسیمنتلتقثلمسنتیبنت مسیبدذلسللمثقتلنمیبتدذتبی لتاسلیمتلناتیلندیبسریبرمن تادنف</td>
<td>بمینستبمکهبیسلمنشسئب.شس� �بئمیس.وربسیئ.لیبذئس.یولئش س .لوئبیلوشئ</td>
</tr>
<tr>
<td>ققققققققققققققققققق</td>
<td>ثیثزثبزسیربیرشبرییل</td>
</tr>
</table>
</div>
</body>
</html>

یه دمو ( zip ) بذار . مرسی

tadayoni

پنج شنبه 24 مرداد 1392, 15:56 عصر

دوست عزیز این یک تابع هست و تابع رو باید جای خودش استفاده کنی و فراخوانی کنی
من فقط این کد رو توی یه صفحه گذاشتم برات تا نتیجه رو ببینی
فراخوانی اون رو باید سر جاش انجام بدی
http://tadayoni.persiangig.com/document/noname1.zip

masudafsar

جمعه 25 مرداد 1392, 20:10 عصر

tadayoni تابع جاوا اسکریپتی که گذاشتی رو دیدم عالی بود ولی دیگه مشکلم با CSS حل شد و نیازی به JS نبود.

refugee

شنبه 26 مرداد 1392, 07:09 صبح

tadayoni تابع جاوا اسکریپتی که گذاشتی رو دیدم عالی بود ولی دیگه مشکلم با CSS حل شد و نیازی به JS نبود.

من بهش گفتم اون کد رو بذاره ...

تشکر اقای تدیونی

tadayoni

یک شنبه 27 مرداد 1392, 09:21 صبح

خ
من بهش گفتم اون کد رو بذاره ...

تشکر اقای تدیونی
خواهش میکنم. تدینی هستم :دی