updated docs

docs/features/README.md

@@ -7,6 +7,7 @@ DataCards offers a wide range of features to display your Dataview query results
 - **Presets**: Choose from multiple card layouts optimized for different content types
 - **Image Support**: Display images from frontmatter properties
 - **Property Customization**: Control which properties appear and how they're displayed
+- **Visual Enhancements**: Automatic theme integration and text truncation options
 - **Mobile Optimization**: Responsive design with mobile-specific settings
 - **Flexible Styling**: Customize appearance with various settings
 - **Dynamic Updates**: Automatically update cards when properties change

docs/features/advanced-options.md

@@ -77,6 +77,16 @@ Enable or disable subtle shadows:
 enableShadows: false
 ```
 
+### Text Truncation
+
+Truncate long property values with ellipsis for cleaner layouts:
+
+```
+truncateText: true
+```
+
+This prevents long text from wrapping to multiple lines and instead shows "..." when text exceeds the available width. Useful for maintaining consistent card heights and clean layouts.
+
 ## Mobile Optimization
 
 Customize how cards appear on mobile devices:
@@ -140,6 +150,7 @@ Here's a complete list of all supported settings:
 | `propertiesAlign` | Text alignment for properties and their labels (`left`, `center`, `right`) | `left` |
 | `titleAlign` | Text alignment for the title/filename (`left`, `center`, `right`) | `left` |
 | `fontSize` | Text size for all card elements (`larger`, `large`, `default`, `small`, `smaller`) | `default` |
+| `truncateText` | Truncate long property values with ellipsis | `false` |
 | `booleanDisplayMode` | How to display boolean values (`both`, `checkbox`, `text`) | `both` |
 | `showBooleanLabels` | Whether to show text labels for boolean values | `true` |
 | `booleanTrueText` | Custom text for true values | `true` |
@@ -207,3 +218,15 @@ contentHeight: 250px
 titleAlign: center
 propertiesAlign: left
 ```
+
+### Text Truncation Example
+
+```datacards
+TABLE file.link, description, tags FROM #articles
+SORT file.mtime DESC
+
+// Settings
+preset: compact
+truncateText: true
+fontSize: small
+```

docs/settings-reference.md

@@ -53,6 +53,7 @@ imageProperty: cover
 | `propertiesAlign` | Text alignment for properties | `left` | `left`, `center`, `right` |
 | `titleAlign` | Text alignment for title | `left` | `left`, `center`, `right` |
 | `fontSize` | Text size for all elements | `default` | `larger`, `large`, `default`, `small`, `smaller` |
+| `truncateText` | Truncate long text with ellipsis | `false` | `true`, `false` |
 | **Layout Settings** | | | |
 | `dynamicColumns` | Auto-adjust columns based on width | `false` | `true`, `false` |
 | `minCardWidth` | Minimum card width for dynamic layout | `250px` | CSS value (e.g., `300px`) |
@@ -134,4 +135,16 @@ preset: grid
 imageProperty: cover
 dynamicColumns: true
 minCardWidth: 280px
+```
+
+### Text Truncation Example
+
+```datacards
+TABLE file.link, author, description, tags FROM #articles
+SORT file.mtime DESC
+
+// Settings
+preset: compact
+truncateText: true
+fontSize: small
 ```

src/models/settings.ts

@@ -60,6 +60,7 @@ export interface DataCardsSettings {
   propertiesAlign: 'left' | 'center' | 'right'; // Alignment for properties and labels
   titleAlign: 'left' | 'center' | 'right'; // Alignment for the title (filename)
   fontSize: FontSize; // Font size for all text elements
+  truncateText: boolean; // Enable text truncation with ellipsis for long property values
 
   // Boolean display settings
   booleanDisplayMode: BooleanDisplayMode; // How to display boolean values
@@ -130,6 +131,7 @@ export const DEFAULT_SETTINGS: DataCardsSettings = {
   propertiesAlign: 'left', // Default to left alignment
   titleAlign: 'left', // Default to left alignment
   fontSize: 'default', // Default font size
+  truncateText: false, // Default to showing full text
 
   // Boolean display settings
   booleanDisplayMode: 'both', // Default to showing both checkbox and text

src/services/renderer.ts

@@ -140,6 +140,11 @@ export class RendererService {
       cardsContainer.addClass('datacards-no-shadows');
     }
 
+    // Add truncate text class if enabled
+    if (settings.truncateText) {
+      cardsContainer.addClass('datacards-truncate-text');
+    }
+
     // Apply font size class if specified
     if (settings.fontSize && settings.fontSize !== 'default') {
       cardsContainer.addClass(`datacards-font-${settings.fontSize}`);

src/ui/settings-tab.ts

@@ -180,6 +180,16 @@ export class DataCardsSettingTab extends PluginSettingTab {
           await this.plugin.saveSettings();
         }));
 
+    new Setting(containerEl)
+      .setName('Truncate long text')
+      .setDesc('Add ellipsis (...) to property values that are too long to fit on one line')
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.truncateText)
+        .onChange(async (value) => {
+          this.plugin.settings.truncateText = value;
+          await this.plugin.saveSettings();
+        }));
+
     // Card Content Settings
     new Setting(containerEl).setName('Card content').setHeading();
 

styles.css

@@ -550,7 +550,7 @@ input[data-boolean-value="false"].datacards-checkbox {
   padding: 2px 8px;
   border-radius: 12px;
   background-color: var(--background-modifier-border);
-  color: var(--text-muted);
+  color: var(--interactive-accent);
   font-size: 0.8em;
   text-decoration: none;
 }
@@ -564,7 +564,7 @@ a.datacards-tag:hover {
 
 /* Internal links */
 .datacards-property-value .internal-link {
-  color: var(--text-accent);
+  color: var(--interactive-accent);
   text-decoration: none;
 }
 
@@ -580,7 +580,7 @@ a.datacards-tag:hover {
 .datacards-file-property .internal-link {
   font-size: 1.2em;
   font-weight: 600;
-  color: var(--text-accent);
+  color: var(--interactive-accent);
   text-decoration: none;
 }
 
@@ -641,6 +641,13 @@ a.datacards-tag:hover {
   text-decoration: underline;
 }
 
+/* Text truncation */
+.datacards-truncate-text .datacards-property-value {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* Preset variations */
 
 /* Grid preset - Balanced default layout for most use cases */