小编Hug*_*hes的帖子

我在尝试text-overflow: ellipsis使用动态宽度的元素时遇到了一些问题.我已经研究过其他解决方案,但它们似乎都使用某种形式的静态宽度,因为我希望能够实现完全动态的解决方案.Javascript是一个选项,但如果可能的话,更愿意将它保留给CSS.我也有任何IE8兼容的解决方案的约束.以下是我到目前为止的情况.

HTML:

<div class="container">
    <div class="col-1 cell">
        <h1>Title</h1>
    </div>
    <div class="col-2 cell">
        <nav>
            <ul>
                <li><a href="#">Main #1</a></li>
                <li><a href="#">Main #2</a></li>
                <li><a href="#">Main #3</a></li>
                <li><a href="#">Main #4</a></li>
                <li><a href="#">Main #5</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-3 cell">
        <div class="foo">
            <img src="http://placehold.it/50x50" alt="">
        </div>
        <div class="bar">
            Some overly long title that should be ellipsis
        </div>
        <div class="baz">
            v
        </div>
    </div>
</div>

SCSS:

.container {
    border: 1px solid #ccc;
    display: table;
    padding: 30px 15px;
    table-layout: fixed;
    width: 100%;
}

.cell { …

我对 Angular 比较陌生，正在努力弄清楚如何将字符串传递到模板中。我想创建一个可重用的模板（或组件），它将显示一些有关如何继续执行操作的说明信息。

目前我正在通过执行以下操作来实现这一目标：

<div *ngIf="foo; else noFoo">
  <!-- Show things -->
</div>

<div *ngIf="bar; else noBar">
  <!-- Show things -->
</div>

<ng-template #noFoo>
  <div class="message">
    <h4>No Foo</h4>
    <p>Please do foo to continue.</p>
  </div>
</ng-template>

<ng-template #noBar>
  <div class="message">
    <h4>No Bar</h4>
    <p>Please do bar to continue.</p>
  </div>
</ng-template>

虽然这工作正常，但它会产生相当多具有非常相似代码的模板。相反，我想做一些类似的事情：

<div *ngIf="foo; else showMessage">
  <!-- Show things -->
</div>

<div *ngIf="bar; else showMessage">
  <!-- Show things -->
</div>

<ng-template #showMessage>
  <div class="message">
    <h4>{{ heading }}</h4> <!-- get dynamic heading -->
    <p>{{ …

我创建了一个可重用的组件来呈现表格。它目前适用于基本表格，但在某些情况下我希望能够自定义表格中的单个列/单元格。

这是我在父组件中使用的代码：

<!-- PARENT TEMPLATE -->
<app-table
  [headers]="headers"
  [keys]="keys"
  [rows]="rows">
</app-table>

// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
  { 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
  { 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];

我在子组件中使用的代码：

<!-- CHILD TEMPLATE -->
<table>
  <thead>
    <tr>
      <td *ngFor="let header of headers">
        {{ header }}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of keys">
        {{ render(key, …

我在我正在开发的Wordpress主题中使用高级自定义字段的灵活内容区域.我sub_field的一个需要一个textarea.

当我get_sub_field从模板中拨打电话时,它已经包含在<p></p>标签中.如何在该段落中添加课程？

例:

get_sub_field('textarea');

输出:

<p>This is my textarea.</p>

期望:

<p class="my-class">This is my textarea.</p>

谢谢你的帮助!