عدم نمایش nowarp در white-space

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام، من زمانی که میخوام از white-space استفاده کنم گزینه nowarp و... رو واسم نمیاره

برای بقیه موارد هیچ مشکلی ندارم فقط روی همین white-space آیتمی رو نمایش نمیده، دستی هم جلوش nowarp مینویسم اما کار نمیکنه

لیست اکستنشن هایی که استفاده میکنم:

Tokyo Night

Prettier - Code formatter

One Dark Pro

Live Server

Live Sass Compiler

jQuery Code Snippets

JavaScript (ES6) code snippets

HTML CSS Support

HTML Boilerplate

Electron Color Theme

Django

Auto Rename Tag

Auto Close Tag

ممنون میشم راهنمایی بفرمایید

سلام. وقت بخیر

ممنون می‌شم کدهاتون رو در ادیتور بذارید تا بتونیم کپی کنیم و تستشون کنیم🙏

سحر پاشائی ۰۵ خرداد ۱۴۰۳، ۱۰:۳۸

خدمت شما:

@font-face {
  font-family: Anjoman;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/woff/AnjomanMaxFN-Medium.woff") format("woff"), url("../fonts/woff2/AnjomanMaxFN-Medium.woff2") format("woff2"), url("../fonts/TTF/AnjomanMaxFN-Medium.ttf") format("ttf");
}
@font-face {
  font-family: Anjoman;
  font-style: normal;
  font-weight: 950;
  src: url("../fonts/woff/AnjomanMaxFN-SemiBold.woff") format("woff"), url("../fonts/woff2/AnjomanMaxFN-SemiBold.woff2") format("woff2"), url("../fonts/TTF/AnjomanMaxFN-SemiBold.ttf") format("ttf");
}
*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Anjoman;
}
a {
  text-decoration: none;
}
li,
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.menu {
  background-color: #e9e9e9;
  padding: 10px;
  box-shadow: 0 0 20px 0 #0000005c;
}
ul li {
  display: inline;
  /* margin: 0 10px; */
  padding: 10px;
}
ul li:hover {
  background-color: yellow;
  border-bottom: 2px solid blue;
}
ul li a {
  color: rgb(44, 44, 44);
  padding: 0 5px;
}
ul li a:hover {
  color: brown;
}
.menu-icon {
  color: rgb(44, 44, 44);
}
.menu-icon:hover {
  color: brown;
}
.sub-menu {
  position: relative;
}
.ziro-sub-menu {
  white-space: ;
  position: absolute;
  top: 47px;
  right: 0px;
  min-width: 200px;
  background-color: #e9e9e9;
  display: none;
}
.ziro-sub-menu li {
  display: block;
}
li.sub-menu:hover .ziro-sub-menu {
  display: block;
}

اچ تی ام ال:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <script src="https://kit.fontawesome.com/ce810cf9de.js" crossorigin="anonymous"></script>
    <title>My Website Template</title>
  </head>
  <body>
    <nav class="menu">
      <ul class="ul-menu">
        <li>
          <i class="fa-solid fa-house menu-icon"><a href="http://">صفحه اصلی</a></i>
        </li>
        <li class="sub-menu">
          <a href="http://">دسته بندی</a>
          <ul class="ziro-sub-menu">
            <li><a href="#">گیفت کارتتتتتتتتتتتتتتتتتتتتتتتتتتتت</a></li>
            <li><a href="#"></a>لایسنس</li>
            <li><a href="#"></a>آنتی ویروس</li>
          </ul>
        </li>
        <li><a href="http://">مقالات</a></li>
        <li><a href="http://">درباره ما</a></li>
        <li><a href="http://">تماس با ما</a></li>
      </ul>
    </nav>
  </body>
</html>

Mohammad ۰۵ خرداد ۱۴۰۳، ۱۶:۱۸

ممنونم. من متوجه نشدم دقیقا می‌خواید چی کار کنید اما یک مثال براتون می‌زنم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quis,
        vitae asperiores perferendis rem ex vel provident eum, voluptates
        ducimus recusandae expedita! Sed ratione laboriosam beatae nesciunt
        ipsam porro voluptates odio temporibus quas, quidem explicabo rem
        consequatur error, voluptatum non doloribus, placeat possimus saepe?
        Eum, odit voluptas. Quia, error quos.
      </p>
    </div>
  </body>
</html>

      div {
        width: 100px;
        height: 200px;
        border: 2px solid hotpink;
        padding: 15px;
        white-space: nowrap;
        overflow: auto;
      }

اینجا برای این که محتوای <p> نشکنه و در یک لاین نشون داده بشه همش، به containerش که <div> هست، white-space: nowrap دادم (به من هم پیشنهاد نمیده، دستی نوشتم). و برای این این که از نگهدارندش بیرون نزنه هم overflow: auto دادم که اسکرول بخوره در صورت نیاز.

اگر مقدار wrap رو براش ست کنم به جای nowrap، پاراگراف به اندازه عرض <div> ادامه پیدا می‌کنه و بعد ادامش می‌شکنه میوفته لاین بعدی.

اگر هنوز مشکلی هست ممنون می‌شم جزئیات بیشتری بگید.

بهترین پاسخ

سحر پاشائی ۰۶ خرداد ۱۴۰۳، ۱۳:۱۷

خیلی ممنون، مشکلم این بود که چرا vscode من مقدارهای white-space: را خودش پیشنهاد نمیده که مثل اینکه برای شما هم پیشنهاد نمیده.

Mohammad ۰۶ خرداد ۱۴۰۳، ۱۸:۱۲