@shixinde/vuepress-theme-init/docs/assets/CSS笔记.html-fAv9dNNH.js

### 其他开源项目

import{_ as s,c as n,o as a,a as e}from"./app-Dx9bNbfq.js";const p={},l=e(`<h2 id="省略号-单行" tabindex="-1"><a class="header-anchor" href="#省略号-单行"><span>省略号 - 单行</span></a></h2><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token selector">.singe-line </span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">word-break</span><span class="token punctuation">:</span> break-all<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">  &lt;p&gt;单行省略&lt;/p&gt;</span>
<span class="line">  &lt;div class=<span class="token string">&quot;singe-line box&quot;</span> <span class="token punctuation">:</span>title=<span class="token string">&quot;content&quot;</span>&gt;</span>
<span class="line">    <span class="token punctuation">{</span><span class="token punctuation">{</span> content <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line">  &lt;/div&gt;</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="省略号-两行" tabindex="-1"><a class="header-anchor" href="#省略号-两行"><span>省略号 - 两行</span></a></h2><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">.double-line</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">word-break</span><span class="token punctuation">:</span> break-all<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">  <span class="token selector">&lt;p&gt;两行省略&lt;/p&gt;</span>
<span class="line">  &lt;div class=&quot;box&quot;&gt;</span>
<span class="line">    &lt;div class=&quot;double-line&quot; :title=&quot;content2&quot;&gt;</span></span>
<span class="line">      <span class="token punctuation">{</span><span class="token punctuation">{</span> content2 <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line">    &lt;/div&gt;</span>
<span class="line">  &lt;/div&gt;</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="超过元素宽高省略" tabindex="-1"><a class="header-anchor" href="#超过元素宽高省略"><span>超过元素宽高省略</span></a></h2><blockquote><p>需要设置元素宽度与高度,根据高度看下最多能放几行,再设置-webkit-line-clamp的值为最大行数</p></blockquote><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">.over-line</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">height</span><span class="token punctuation">:</span> 65px<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">word-break</span><span class="token punctuation">:</span> break-all<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span>
<span class="line">    <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line">  <span class="token selector">&lt;p&gt;超过元素宽高省略&lt;/p&gt;</span>
<span class="line">  &lt;div class=&quot;box&quot;&gt;</span>
<span class="line">    &lt;div class=&quot;over-line&quot; :title=&quot;content&quot;&gt;</span></span>
<span class="line">      <span class="token punctuation">{</span><span class="token punctuation">{</span> content <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line">    &lt;/div&gt;</span>
<span class="line">  &lt;/div&gt;</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="单行-多行-省略号-scss" tabindex="-1"><a class="header-anchor" href="#单行-多行-省略号-scss"><span>单行 多行 省略号 scss</span></a></h2><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss" data-title="scss"><pre class="language-scss"><code><span class="line"><span class="token comment">/** @format */</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">@mixin</span> <span class="token function">multi-ellipsis</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$lines</span></span><span class="token punctuation">:</span> 1<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">line-clamp</span><span class="token punctuation">:</span> <span class="token variable">$lines</span><span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> <span class="token variable">$lines</span><span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">word-break</span><span class="token punctuation">:</span> break-all<span class="token punctuation">;</span></span>
<span class="line">  <span class="token comment">/* autoprefixer: ignore next */</span></span>
<span class="line">  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span>
<span class="line">  <span class="token comment">/* autoprefixer: ignore next */</span></span>
<span class="line">  <span class="token property">box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">@mixin</span> <span class="token selector">ellipsis </span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span></span>
<span class="line">  <span class="token property">word-break</span><span class="token punctuation">:</span> keep-all<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9),t=[l];function i(c,o){return a(),n("div",null,t)}const r=s(p,[["render",i],["__file","CSS笔记.html.vue"]]),d=JSON.parse('{"path":"/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/CSS%E7%AC%94%E8%AE%B0.html","title":"CSS 笔记","lang":"zh-CN","frontmatter":{"title":"CSS 笔记","date":"2024-8-4","tags":["CSS","笔记"],"categories":["自学篇"],"secret":true,"passwd":1233211234567},"headers":[{"level":2,"title":"省略号 - 单行","slug":"省略号-单行","link":"#省略号-单行","children":[]},{"level":2,"title":"省略号 - 两行","slug":"省略号-两行","link":"#省略号-两行","children":[]},{"level":2,"title":"超过元素宽高省略","slug":"超过元素宽高省略","link":"#超过元素宽高省略","children":[]},{"level":2,"title":"单行 多行 省略号 scss","slug":"单行-多行-省略号-scss","link":"#单行-多行-省略号-scss","children":[]}],"git":{"updatedTime":1755349061000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":3}]},"filePathRelative":"常用笔记/CSS笔记.md","excerpt":"<h2>省略号 - 单行</h2>\\n<div class=\\"language-scss\\" data-highlighter=\\"prismjs\\" data-ext=\\"scss\\" data-title=\\"scss\\"><pre class=\\"language-scss\\"><code><span class=\\"line\\"><span class=\\"token selector\\">.singe-line </span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">    <span class=\\"token property\\">text-overflow</span><span class=\\"token punctuation\\">:</span> ellipsis<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">    <span class=\\"token property\\">overflow</span><span class=\\"token punctuation\\">:</span> hidden<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">    <span class=\\"token property\\">word-break</span><span class=\\"token punctuation\\">:</span> break-all<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">    <span class=\\"token property\\">white-space</span><span class=\\"token punctuation\\">:</span> nowrap<span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\">  <span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">  &lt;p&gt;单行省略&lt;/p&gt;</span>\\n<span class=\\"line\\">  &lt;div class=<span class=\\"token string\\">\\"singe-line box\\"</span> <span class=\\"token punctuation\\">:</span>title=<span class=\\"token string\\">\\"content\\"</span>&gt;</span>\\n<span class=\\"line\\">    <span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> content <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\">  &lt;/div&gt;</span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{r as comp,d as data};