markdown编辑器遇到问题表格中文字超出如何处理-表格文字不换行怎么处理，md表格宽度控制，表格对其怎么处理——顺带优雅草央千澈学习markdown编辑器表格绘制进阶功能-完整说明

本文链接：https://blog.csdn.net/dujiangdu123/article/details/144649897

markdown编辑器遇到问题表格中文字超出如何处理-表格文字不换行怎么处理，md表格宽度控制，表格对其怎么处理——顺带优雅草央千澈学习markdown编辑器表格绘制进阶功能-完整说明

问题背景

本来优雅草央千澈只想写一点代码，但是就会遇到无限个问题所以就要学习无限个问题，今天遇到

字超出表格了，肿么办，一时半会我还真不知道怎么办，因为阿丢啊格式是这样的

于是优雅草央千澈对Markdown编辑器的表格功能进行了一轮进阶学习。

解决方案

基础知识：

1. 前言

表格通常作为一种布局形式，用于结构化的数据展示。

Markdown 表格包含三个部分：表头、分割线、数据。

表头用来对列名对象进行描述，也就是通常所说的列名；
数据用来展示每行的具体内容，数据是表格的核心；
分割线 用来区分表头和数据，也是 Markdown 中表格定义的最基本语法要求。

环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。

2. 语法详解

2.1 定义表格

Markdown 表格由「竖线 |」、「减号 -」、「冒号 :」三种符号组成。

竖线用来定义列，每两个竖线之间为一个单元格元素；
减号用来定义分割线，也就是分割表头和数据体；
冒号配合减号使用，用于定义列数据的对齐属性。

我们先假定一组表格数据：

学号    姓名
1        张三
2        李四
3        王五

这其中，第一行 “学号” 和 “姓名” 就是表格的表头，“1”、“2”、“3”，“张三”、“李四”，这些都属于数据体，我们可以用以下方式展示表格内容。

实例 1：

#### 定义表格

|学号|姓名|
|----|----|
|1|张三|
|2|李四|
|3|王五|

其渲染结果如下：

其转换后的 html 的内容如下：

<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
</tr>
</tbody></table>

2.2 设定表格列内容的对齐方式

在分割线上使用「冒号 :」可以定义列内容的对齐方式。

实例 2：

#### 表格内容的对齐

|左对齐|居中对齐|右对齐|
|:--|:--:|--:|
|1|张三|17岁|
|2|李四|18岁|
|3|王五|19岁|

ok，我们发现这里我们有一点能用，就是左对齐，首先我们要左对齐是可用的，也就是文字前面加:

| 业务项|  收费标准 | 备注   | 交付工期   |  其他内容  |
| :------------ | | :------------ | :------------ | :------------ | :------------ |

我们改成这样后再看只是左对齐了，还是会超出，阅读了

最后我得到两种方法

第一种方法可以使用

[单元格文本]

的形式,长度单位可以是 pt , px, cm等
第二种方法可以从外部定义一个「Style」来指定各列的列宽

这里我建议大家使用第一种方法，我也使用第一种方法，于是假设他们100pt的宽度,那么就应该是这样

<div style="width: 100pt"></div>

那么我再次直接应用

| <div style="width: 100pt">业务项|  收费标准 | <div style="width: 100pt">备注 </div>  | 交付工期   |  其他内容  |
| :------------ | | :------------ | :------------ | :------------ | :------------ | 
| <div style="width: 100pt">AI+人工图生视频普通描述标准收费 </div> | （新客户-5元体验一次） | <div style="width: 100pt">提前告知是否配乐或指定配乐  </div>| 2个工作日内  | | 
| <div style="width: 100pt">AI+人工图生视频普通描述标准收费 </div> | 15元 一次 默认10秒，每增加10秒 加收15元 | <div style="width: 100pt">提前告知是否配乐或指定配乐 </div> | 2个工作日内  | |
| <div style="width: 100pt">AI+人工图生视频专业版本收费（带远程运镜）+详细描述转义： </div> | 100元一次 默认10秒，每增加10秒额外加收100元  |<div style="width: 100pt">1，提前告知是否配乐或指定配乐 2，提前告知运镜所需效果 3，提前补充相关细节</div>| 3个工作日内  | |
| <div style="width: 100pt">AI+人工动漫人物转真人+图生视频标准收费 </div> |   25元一次默认10秒，每增加10秒 额外加收15元，|<div style="width: 100pt">1，提前给到动漫人物图，需要对图片有一定要求，2，提前告知需要达到的真人化效果，3，视频衍生处理可额外收费按YYCAI001业务处理</div>  | 3个工作日内  | | |
| <div style="width: 100pt">AI+人工logo设计业务 </div> |   50元一次-一次生成10条，|<div style="width: 100pt">1，提前给logo描述，2，logo的含义和寓意我们会给到，3，从10个logo中选择一个只要认可视为采纳 </div> | 3个工作日内  | | |
| <div style="width: 100pt">更多业务。。</div>  | 更多业务。。|<div style="width: 100pt">更多业务。。  </div>| 更多业务。。 | | |

再次刷新查看：