alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

css styles

Browse Source
This commit is contained in:
Will McGugan
2025-01-27 18:58:24 +00:00
parent d44788a29f
commit f0cfabb4d4
7 changed files with 15 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/css_types/text_overflow.md
View File

@@ -1,35 +0,0 @@
# <text-overflow>
The `<text-overflow>` CSS type sets how Textual wraps text.
## Syntax
The [`<text-overflow>`](./text_overflow.md) type can take any of the following values:
| Value | Description |
| ---------- | ----------------------------------------------------------------------------------- |
| `clip` | Overflowing text will be clipped (the overflow portion is removed from the output). |
| `fold` | Overflowing text will fold on to the next line. |
| `ellipsis` | Overflowing text will be truncate and the last character replaced with an ellipsis. |
## Examples
### CSS
```css
#widget {
text-overflow: ellipsis; /* Disable wrapping */
}
```
### Python
```py
widget.styles.text_overflow = "ellipsis" # Disable wrapping
```
## See also
- [`text-wrap`](./text_wrap.md) to enable or disable text wrapping.

33
docs/css_types/text_wrap.md
View File

@@ -1,33 +0,0 @@
# &lt;text-wrap&gt;
The `<text-wrap>` CSS type sets how Textual wraps text.
## Syntax
The [`<text-wrap>`](./text_wrap.md) type can take any of the following values:
| Value | Description |
| -------- | ------------------------- |
| `wrap` | Word wrap text (default). |
| `nowrap` | Disable text wrapping. |
## Examples
### CSS
```css
#widget {
text-wrap: nowrap; /* Disable wrapping */
}
```
### Python
```py
widget.styles.text_wrap = "nowrap" # Disable wrapping
```
## See also
- [`text-overflow`](./overflow.md) is used to change what happens to overflowing text.

2
docs/snippets/syntax_block_end.md
View File

@@ -1,2 +1,2 @@
</pre></div>
</div>
<!-- Include this snippet when ending a code block that shows the syntax of a CSS rule. -->

3
docs/snippets/syntax_block_start.md
View File

@@ -1,3 +1,2 @@
<!-- Include this snippet when starting a code block that shows the syntax of a CSS rule. -->
<div class="highlight" style="padding: 0.25em 1.15em; background: var(--md-code-bg-color);">
<pre>
<div class="highlight" style="padding: 0.5em 1em; background: var(--md-code-bg-color);font-family: 'Roboto Mono',monospace;">

15
docs/styles/text_overflow.md
View File

@@ -2,20 +2,29 @@
The `text-overflow` style defines what happens when text *overflows*.
Text overflow occurs when there is no space on the vertical axis to fit the entire text.
Text overflow occurs when there is not enough space to fit the text on a line.
This may happen if wrapping is disabled (via [text-wrap](./text_wrap.md)) or if a single word is too large to fit within the width of its container.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
text-overflow: <a href="../../css_types/overflow">&lt;overflow&gt;</a>;
text-overflow: clip | fold | ellipsis;
--8<-- "docs/snippets/syntax_block_end.md"
### Values
| Value | Description |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| `clip` | Overflowing text will be clipped (the overflow portion is removed from the output). |
| `fold` | Overflowing text will fold on to the next line(s). |
| `ellipsis` | Overflowing text will be truncated and the last visible character will be replaced with an ellipsis. |
## Example
In the following example we show the output of each of the values of `text_overflow`.
The widgets all have [text wrapping][`text-wrap`](./text_wrap.md) disabled, which will cause the
The widgets all have [text wrapping](./text_wrap.md) disabled, which will cause the
example string to overflow as it is longer than the available width.
In the first (top) widget, `text-overflow` is set to "clip" which clips any text that is overflowing, resulting in a single line.

2
docs/styles/text_wrap.md
View File

@@ -7,7 +7,7 @@ You can also set this style to "nowrap" which will disable wrapping entirely.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
text-wrap: <a href="../../css_types/text_wrap">&lt;text-wrap&gt;</a>;
text-wrap: wrap | nowrap;
--8<-- "docs/snippets/syntax_block_end.md"

2
mkdocs-nav.yml
View File

@@ -41,9 +41,7 @@ nav:
- "css_types/percentage.md"
- "css_types/scalar.md"
- "css_types/text_align.md"
- "css_types/text_overflow.md"
- "css_types/text_style.md"
- "css_types/text_wrap.md"
- "css_types/vertical.md"
- Events:
- "events/index.md"